电子邮件和确认邮件匹配字段要求的自定义验证

Question

您好，我创建了一个示例 ionic4 注册表单，其中包含电子邮件 ID、确认电子邮件 ID、密码、确认密码等字段。并使用密码添加所有必需的验证并确认密码不匹配错误。但我无法对电子邮件 ID 执行相同操作并确认电子邮件 ID。即电子邮件 ID 和确认电子邮件 ID 不匹配 error.below 是我的代码。

Html代码：

        <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文件：

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 };
  }

}

请帮助我如何添加类似于密码不匹配错误的电子邮件不匹配错误。谢谢

Answer 1

我认为您只需要将验证器变成一个数组，并使用与密码相同的技术：

// ...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 };
    }
}

然后将其添加为 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>

Answer 2

你可以做的是在电子邮件上添加（更改）事件并确认电子邮件输入字段并编写一个检查电子邮件的方法并确认电子邮件输入，就像这样 -

html代码：

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

.ts代码：

emailFlag = false;
checkEmail(){

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

现在在您的 html 文件中，您可以通过 *ngIf="!emailFlag" 显示错误。

电子邮件和确认邮件匹配字段要求的自定义验证

Custom validation for email and confirmemail matching fields requirement

ionic4