Form validation - error event

Ionic Framework ionic-v3
1

I have registration template driven registration form. For this moment I can handle validation with build in validators like required and pattern but I also need to check is email correct via field comparing. I found promising answer on Stack Overflow for the first Ionic which match my case. So according to it I want to make something like this with Ionic 2:

      <ion-item>
        <ion-label floating>Email*</ion-label>
        <ion-input type="email" required [(ngModel)]="regModel.Email" name="Email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Repeat Email*</ion-label>
        <ion-input type="email" required [(ngModel)]="EmailRepeat" name="EmailRepeat" pattern="regModel.Email" (blur)="checkEmail($event)"></ion-input>
        <small color="danger" *ngIf="EmailRepeat.$error.pattern"> Emails do not match! </small>
      </ion-item>

But I get error about unresolved variable $error. Is any way to make something like this in Ionic 2?

2

Try Reactive Forms Validation from Angular: here is the link:
https://angular.io/docs/ts/latest/guide/reactive-forms.html

You could do something like below:

   <ion-item>
        <ion-label floating>Email*</ion-label>
        <ion-input type="email" formControlName="email" name="Email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Repeat Email*</ion-label>
        <ion-input type="email" formControlName="repeatEmail" name="EmailRepeat"></ion-input>
        <small color="danger" *ngIf="myFormGroup.errors && myFormGroup.touched"> Emails do not match! </small>
      </ion-item>
</div>
//Component 
import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';

const validateEmail = (control: AbstractControl): { [key: string]: boolean } => {
    const email= control.get('email');
    const repeatEmail= control.get('repeatEmail');
    if (email !=== repeatEmail) {
        return {
            invalid: true
        };
    }
    return null;
};
@Component({
//Component Metadata
})
export class myComponent{
constructor(private _fb: FormBuilder) { }
 myFormGroup: FormGroup = this._fb.group({
        email: [''],
        repeatEmail: [''],
    }, { validator: validateEmail });;
}