I want to see an error message

Ionic Framework ionic-v3
1

When user put the work email address pattern on that time showing an error message
Like this message “please enter your valid email”

below my form HTML

<form [formGroup]="authForm" (ngSubmit)="feedbackconfirm()">
    <ion-item>
    <ion-label color="orange" floating>Full Name</ion-label>
    <ion-input type="text" [(ngModel)]="fullName" formControlName="firstname" required></ion-input>
  </ion-item>
      <ion-item>
    <ion-label color="orange" floating>Email</ion-label>
    <ion-input type="email" [(ngModel)]="email" required formControlName="email"></ion-input>
  </ion-item>
   <ion-item *ngIf="authForm.controls.email.invalid">
                <p>Please enter a valid name.</p>
    </ion-item>
   <ion-item>
    <ion-label color="orange" floating>Subject</ion-label>
    <ion-input type="text" [(ngModel)]="subject" required formControlName="subject"></ion-input>
  </ion-item>
      <ion-item>
    <ion-label color="orange" floating>Message</ion-label>
    <ion-input  type="text" [(ngModel)]="message" required spellingcheck="true" formControlName="message"></ion-input>
  </ion-item>

   <button ion-button full color="fab"  type="submit" [disabled]="!authForm.valid">Send</button>

  </form>

.ts

 this.authForm = this.fb.group({  
            'firstname': ['', Validators.compose([Validators.required])],
            'email': ['', Validators.compose([Validators.required,Validators.pattern(FeedBackPage.EMAIL_REGEX)])],
            'subject': ['', Validators.compose([Validators.required])],
            'message': ['', Validators.compose([Validators.required])],
        });
  }

How can i do that?

Please tell me anyone
Thanks;

2

I have fixed my issue like this

   <ion-item *ngIf="authForm.controls['email'].hasError('pattern') && authForm.controls['email'].touched">
    *This email format is invalid!
  </ion-item>

Thanks