自定义验证电子邮件和确认电子邮件匹配字段的要求 [英] Custom validation for email and confirmemail matching fields requirement

问题描述

您好，我创建了一个ionic4注册表格示例，其中包含电子邮件ID，确认电子邮件ID，密码，确认密码等字段.并添加了所有必需的验证密码，并确认密码不匹配错误.但是我无法对电子邮件ID进行同样的操作并确认电子邮件ID.即电子邮件ID并确认电子邮件ID不匹配错误.以下是我的代码.

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代码:

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

}

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

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

推荐答案

我认为您只需要将验证器转换为数组并使用与密码相同的技术即可.

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

然后将其添加为html中的电子邮件比较部分:

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>

这篇关于自定义验证电子邮件和确认电子邮件匹配字段的要求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！