【发布时间】：2018-09-26 12:55:49
【问题描述】：
我在 Ionic 3 中构建注册表单，我有两个字段 password1 和 password2，要求 password2 必须与 password1 相同。
我的组件：
public registration : FormGroup;
constructor(private formBuilder: FormBuilder) {
this.registration = this.formBuilder.group({
username: ['', Validators.compose([Validators.pattern('^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]+$'), Validators.required])],
email: ['', Validators.compose([Validators.email, Validators.required])],
password1: ['', Validators.compose([Validators.minLength(5), Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$'), Validators.required])],
password2: ['', Validators.required],
}, (registration: FormGroup) => {
return PasswordValidator.areEqual(registration);
});
}
validation_messages = {
'username': [
{ type: 'pattern', message: 'Username must contain only combination of letterns and numbers.' },
{ type: 'required', message: 'Username is required.' }
],
'email': [
{ type: 'required', message: 'Email is required.' },
{ type: 'email', message: 'Not a valid email!' }
],
'password1': [
{ type: 'minlength', message: 'Password must be minimum 5 characters.' },
{ type: 'required', message: 'Password is required.' },
{ type: 'pattern', message: 'Password must contain combination of upper and lower case letterns and numbers.' }
],
'password2': [
{ type: 'required', message: 'Password is required.' },
{ type: 'areEqual', message: 'Confirm password is not same.' },
],
}
我在一个单独的文件中创建了一个密码验证器（不确定它是否正确）：
import { FormControl, FormGroup } from '@angular/forms';
export class PasswordValidator {
static areEqual(formGroup: FormGroup) {
let val;
let valid = true;
for (let key in formGroup.controls) {
if (formGroup.controls.hasOwnProperty(key)) {
let control: FormControl = <FormControl>formGroup.controls[key];
if (val === undefined) {
val = control.value
} else {
if (val !== control.value) {
valid = false;
break;
}
}
}
}
if (valid) {
return null;
}
return {
areEqual: true
}
}
}
还有我的模板：
<!-- Registration Form -->
<form *ngSwitchCase="'registrationForm'" [formGroup]="registration" (ngSubmit)="register()" autocomplete="off">
<ion-item>
<ion-label>Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
</ion-item>
<!-- Username validation errors -->
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.username" >
<div class="error-message" *ngIf=" registration.get('username').hasError(validation.type)
&& ( registration.get('username').dirty || registration.get('username').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label>Email</ion-label>
<ion-input type="email" formControlName="email"></ion-input>
</ion-item>
<!-- Email validation errors -->
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.email" >
<div class="error-message" *ngIf=" registration.get('email').hasError(validation.type)
&& ( registration.get('email').dirty || registration.get('email').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label>Password1</ion-label>
<ion-input type="password" formControlName="password1"></ion-input>
</ion-item>
<!-- Password1 validation errors -->
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.password1" >
<div class="error-message" *ngIf=" registration.get('password1').hasError(validation.type)
&& ( registration.get('password1').dirty || registration.get('password1').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<ion-item>
<ion-label>Password2</ion-label>
<ion-input type="password" formControlName="password2"></ion-input>
</ion-item>
<!-- Password2 validation errors -->
<div class="validation-errors">
<ng-container *ngFor="let validation of validation_messages.password2" >
<div class="error-message" *ngIf=" registration.get('password2').hasError(validation.type)
&& ( registration.get('password2').dirty || registration.get('password2').touched)">
{{ validation.message }}
</div>
</ng-container>
</div>
<button ion-button full type="submit" [disabled]="!registration.valid">Submit</button>
</form>
所有其他验证工作正常，即打印正确的消息。 Password2 验证只对空密码有效，不检查是否与password1 相同。
我做错了什么？
【问题讨论】：