我正在处理 Angular 7 表单。我对表单进行了内置验证并且效果很好，但是当我要进行自定义验证并为此创建自定义函数时，我得到了一个userpass字段的错误。我正在做的是，只是为了比较两个密码，如果它们不匹配，那么应该显示一个错误。
的HTML
<form action="" method="POST" id="user-register" [formGroup]="registrationForm" (onSubmit)="registerUser(registrationForm)">
<div class="inInput">
<input type="text" id="username" formControlName="username" [class.is-invalid]="registrationForm.get('username').invalid && registrationForm.get('username').touched">
<label for="username">Type Your Name</label>
<!-- <small [class.d-none]="registrationForm.get('username').valid || registrationForm.get('username').untouched" class="error">Username is required !</small> -->
<div *ngIf="username.invalid && username.touched">
<small *ngIf="username.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="username.errors?.maxlength" class="error">The manimum length is 20 character.</small>
<small *ngIf="username.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="email" id="useremail" formControlName="useremail" [class.is-invalid]="registrationForm.get('useremail').invalid && registrationForm.get('useremail').touched">
<label for="useremail">Type Your Email</label>
<div *ngIf="useremail.invalid && useremail.touched">
<small *ngIf="useremail.errors?.email" class="error">Invalid Email</small>
<small *ngIf="useremail.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="password" id="userpass" formControlName="userpass" [class.is-invalid]="registrationForm.get('userpass').invalid && registrationForm.get('userpass').touched">
<label for="userpass">Type Your Password</label>
<div *ngIf="userpass.invalid && userpass.touched">
<small *ngIf="userpass.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="userpass.errors?.passwordpattern" class="error">Password cannot be {{userpass.errors?.passwordpattern.value}}.</small>
<small *ngIf="userpass.errors?.mismatch" class="error"> Passwords doesn't match. </small>
<small *ngIf="userpass.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="inInput">
<input type="password" id="userpass2" formControlName="userpass2" [class.is-invalid]="registrationForm.get('userpass2').invalid && registrationForm.get('userpass2').touched">
<label for="userpass2">Re-Type Your Password</label>
<div *ngIf="userpass2.invalid && userpass2.touched">
<small *ngIf="userpass2.errors?.minlength" class="error">The minimum length should be 5.</small>
<small *ngIf="userpass2.errors?.passwordpattern" class="error">Password cannot be {{userpass.errors?.passwordpattern.value}}.</small>
<small *ngIf="userpass2.errors?.mismatch" class="error"> Passwords doesn't match. </small>
<small *ngIf="userpass2.errors?.required" class="error">The username is required.</small>
</div>
</div>
<div class="user-register-submit">
<button type="submit" class="inBtn inBtn-info"> Register Now ! </button>
</div>
</form>register.ts 代码
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { passWordValidation, passwordCompare } from '../globals/validators';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent {
constructor(private fb:FormBuilder) {}
get username(){ return this.registrationForm.get('username'); }
get useremail(){ return this.registrationForm.get('useremail'); }
get userpass(){ return this.registrationForm.get('userpass'); }
get userpass2(){ return this.registrationForm.get('userpass2'); }
registrationForm = this.fb.group({
username : ['', [Validators.required, Validators.minLength(5), Validators.maxLength(20)]],
useremail : ['',[Validators.required, Validators.email]],
userpass : ['',[Validators.required, Validators.minLength(5), passWordValidation, passwordCompare(this.registrationForm.get('userpass'), this.registrationForm.get('userpas2'))]],
userpass2 : ['',[Validators.required, Validators.minLength(5), passWordValidation, passwordCompare(this.registrationForm.get('userpass'), this.registrationForm.get('userpass2'))]]
})
}validators.ts 代码
import {AbstractControl, ValidatorFn} from '@angular/forms';
export function passWordValidation(control : AbstractControl):{[key:string]:any} | false{
const forbidden = /admin/.test(control.value);
return forbidden ? {'passwordpattern': {value:control.value}} : false;
}
//Compare the inputs
export function passwordCompare(userpass: AbstractControl , userpass2 : AbstractControl): ValidatorFn{
return (): null | {[key:string]:any} => {
return ((userpass.value == userpass2.value) && (userpass2.value == userpass.value)) ? null : {'mismatch': true} ;
}
}第一个函数在 中完美运行
validators.ts，但我不知道第二个函数有什么问题。当我从中删除时passwordCompare()，register.ts我没有收到任何错误。