嗨，我创建了一个示例ionic4注册表格，其中包含电子邮件ID，确认电子邮件ID，密码，确认密码等字段。并添加了所有必需的验证密码，并确认密码不匹配错误。但是我无法对电子邮件ID进行同样的操作并确认电子邮件ID。即电子邮件ID并确认电子邮件ID不匹配错误。以下是我的代码。
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 };
}
}
请协助我，如何添加类似于密码不匹配错误的电子邮件不匹配错误。谢谢
我认为您只需要将验证器转换为数组并使用与密码相同的技术即可：
// ...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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句