Custom validation for email and confirmemail matching fields requirement

问题

Hi I have created a sample ionic4 registration form with fields like Email id, Confirm email id, password, confirm password. And added all the required validations with a password and confirm password mismatching error. But I am unable to do the same with Email id and confirm Email id. i.e email id and confirm email id mismatching error.below is my code.

Html code:

        <ion-content>
      <form [formGroup]="addreceiver">
      <div style="margin:15px">


  <ion-item>
    <ion-label position="floating" >Sender Email Id</ion-label>
    <ion-input formControlName="email" type="email" value=""></ion-input>
  </ion-item>
  <div class="error-messages">
    <ng-container *ngFor="let error of error_messages.email">
      <div class="error-message" *ngIf="addreceiver.get('email').hasError(error.type) && (addreceiver.get('email').dirty || addreceiver.get('email').touched)">
        {{ error.message }}
      </div>
    </ng-container>

  </div>
  <ion-item>
    <ion-label position="floating" >Confirm Sender Email Id</ion-label>
    <ion-input formControlName="confirmemail" type="email" value=""></ion-input>
  </ion-item>
  <div class="error-messages">
    <ng-container *ngFor="let error of error_messages.confirmemail">
      <div class="error-message" *ngIf="addreceiver.get('confirmemail').hasError(error.type) && (addreceiver.get('confirmemail').dirty || addreceiver.get('confirmemail').touched)">
        {{ error.message }}
      </div>
    </ng-container>


  </div>
  <br/>

  <ion-item>
    <ion-label position="floating" >Password</ion-label>
    <ion-input formControlName="password" type="password" ></ion-input>
  </ion-item>
  <div class="error-messages">
    <ng-container *ngFor="let error of error_messages.password">
      <div class="error-message" *ngIf="addreceiver.get('password').hasError(error.type) && (addreceiver.get('password').dirty || addreceiver.get('password').touched)">
        {{ error.message }}
      </div>
    </ng-container>

  </div>
  <ion-item>
      <ion-label position="floating" >Confirm Password</ion-label>
      <ion-input formControlName="confirmpassword" type="password" ></ion-input>
    </ion-item>
    <div class="error-messages">
      <ng-container *ngFor="let error of error_messages.confirmpassword">
        <div class="error-message" *ngIf="addreceiver.get('confirmpassword').hasError(error.type) && (addreceiver.get('confirmpassword').dirty || addreceiver.get('confirmpassword').touched)">
          {{ error.message }}
        </div>
      </ng-container>
      <div class="error-message" *ngIf="!addreceiver.get('confirmpassword').errors && addreceiver.hasError('passwordNotMatch') && (addreceiver.get('confirmpassword').dirty || addreceiver.get('confirmpassword').touched)">
        Passwords do not match
                </div>

    </div> 
    <br/>
              <ion-button [disabled]="!addreceiver.valid" color="secondary">SAVE</ion-button>

          </div>
          </form>

       </ion-content>

Ts file:

import { Component } from '@angular/core';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';

   @Component({
   selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

 addreceiver: FormGroup;

 error_messages = {

'email': [
  { type: 'required', message: 'Sender Email id is required.'},
],

'confirmemail': [
  { type: 'required', message: 'Confirm Sender Email id is required.'},
],
'password': [
  { type: 'required', message: 'Password is required.'},
  { type: 'pattern', message: 'Password must be contain atleast 8 letters one lowercase and one uppercase letter one digit and one special character.'},
],
'confirmpassword': [
  { type: 'required', message: 'Confirm Password is required must be same as Password'},
]

 }

  constructor(
  public formBuilder: FormBuilder
 ) {
this.addreceiver = this.formBuilder.group({

  email: new FormControl('', Validators.compose([
    Validators.required
  ])),
  confirmemail: new FormControl('', Validators.compose([
    Validators.required
  ])),
  password: new FormControl('', Validators.compose([
    Validators.required,
    Validators.minLength(8),
    Validators.maxLength(30),
    Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&()^-_+#`*])[A-Za-z\d$@$!%*?&()^-_+#`*].{7,}')


   ])),
  confirmpassword: new FormControl('', Validators.compose([
    Validators.required
  ])),

   },
    { 
    validators: this.password.bind(this)
    });

 }

 ngOnInit() {
    }

   password(formGroup: FormGroup) {
    const { value: password } = formGroup.get('password');
  const { value: confirmPassword } = formGroup.get('confirmpassword');
  return password === confirmPassword ? null : { passwordNotMatch: true };
  }

}

please help assist me how can I add email mismatching error similar to password mismatching error. thank you

回答1:

I think you just need to turn the validators into an array and use the same technique as your passwords:

// ...snipped from your file just to show the specifics:
        {
            validators: [
                this.password.bind(this),
                this.emailsmatch.bind(this)
            ]
        });
    }

    ngOnInit() {
    }

    password(formGroup: FormGroup) {
        const { value: password } = formGroup.get('password');
        const { value: confirmPassword } = formGroup.get('confirmpassword');
        return password === confirmPassword ? null : { passwordNotMatch: true };
    }

    emailsmatch(formGroup: FormGroup) {
        const { value: email } = formGroup.get('email');
        const { value: emailconfirm } = formGroup.get('confirmemail');
        return email === emailconfirm ? null : { emailNotMatch: true };
    }
}

And then add this as your email compare section in the html:

<ion-item>
    <ion-label position="floating">Confirm Sender Email Id</ion-label>
    <ion-input formControlName="confirmemail" type="email" value=""></ion-input>
</ion-item>
<div class="error-messages">
    <ng-container *ngFor="let error of error_messages.confirmemail">
        <div class="error-message"
            *ngIf="addreceiver.get('confirmemail').hasError(error.type) && (addreceiver.get('confirmemail').dirty || addreceiver.get('confirmemail').touched)">
            {{ error.message }}
        </div>
    </ng-container>
    <div class="error-message"
        *ngIf="!addreceiver.get('confirmemail').errors && addreceiver.hasError('emailNotMatch') && (addreceiver.get('confirmemail').dirty || addreceiver.get('confirmemail').touched)">
        Emails do not match
    </div>
</div>

回答2:

What you can do is add (change) event on email and confirm email input field and write a method for checking email and confirm email input like this -

html code:

<ion-input formControlName="confirmemail" type="email" (change)="checkEmail()"></ion-input>
<ion-input formControlName="email" type="email" (change)="checkEmail()"></ion-input>

.ts Code:

emailFlag = false;
checkEmail(){

if(this.formGroup.get('email') === this.formGroup.get('confirmemail')){
this.emailFlag = true;
} else {
  this.emailFlag= false; 
}
}

And now in your html file through *ngIf="!emailFlag" you can show error.

来源：https://stackoverflow.com/questions/57177156/custom-validation-for-email-and-confirmemail-matching-fields-requirement