我需要使用 react 形式 Angular 4+ 检查密码和确认密码字段是否具有相同的值。我确实在这里看到了很多相同的答案,Angular 4 表单验证重复密码,比较验证器中的字段与 Angular 4,但似乎没有一个对我有用。
面临的问题,如何以响应式(Reactive)方法结合确认电子邮件和确认密码验证器。
确认电子邮件或确认密码都工作正常。
this.addEmpForm = new FormGroup({
'name': new FormControl(null, Validators.required),
'email': new FormControl(null, [Validators.required, Validators.email]),
'cemail': new FormControl(null, [Validators.required, Validators.email]),
'password': new FormControl(null, Validators.required),
'cpassword': new FormControl(null, Validators.required)
}, this.pwdMatchValidator);
emailMatchValidator(frm: FormGroup) {
return frm.get('password').value === frm.get('cpassword').value
? null : { 'mismatch': true };
}
pwdMatchValidator(frm: FormGroup) {
return frm.get('password').value === frm.get('cpassword').value
? null : { 'mismatch': true };
}
HTML
<span class="help-block"
*ngIf="addEmpForm.get('cemail').touched && cemail?.errors
|| addEmpForm.get('cemail').touched
&& addEmpForm.errors?.mismatch">
Email doesn't match
</span>
最佳答案
组件 TS
password: [
'',
[Validators.required, Validators.maxLength(50)]
],
confirmPassword: [
'',
[
Validators.required,
PasswordValidator('password'),
Validators.maxLength(50)
]
],
emailAddress: [
'',
[Validators.required, Validators.email, Validators.maxLength(50)]
],
confirmEmailAddress: [
'',
[
Validators.required,
Validators.email,
EmailValidator('emailAddress'),
Validators.maxLength(50)
]
]
电子邮件验证器
import { FormControl } from '@angular/forms';
export function EmailValidator(confirmEmailInput: string) {
let confirmEmailControl: FormControl;
let emailControl: FormControl;
return (control: FormControl) => {
if (!control.parent) {
return null;
}
if (!confirmEmailControl) {
confirmEmailControl = control;
emailControl = control.parent.get(confirmEmailInput) as FormControl;
emailControl.valueChanges.subscribe(() => {
confirmEmailControl.updateValueAndValidity();
});
}
if (emailControl.value.toLocaleLowerCase() !==
confirmEmailControl.value.toLocaleLowerCase()
) {
return { notMatch: true };
}
return null;
};
}
密码验证器
import { FormControl } from '@angular/forms';
export function PasswordValidator(confirmPasswordInput: string) {
let confirmPasswordControl: FormControl;
let passwordControl: FormControl;
return (control: FormControl) => {
if (!control.parent) {
return null;
}
if (!confirmPasswordControl) {
confirmPasswordControl = control;
passwordControl = control.parent.get(confirmPasswordInput) as FormControl;
passwordControl.valueChanges.subscribe(() => {
confirmPasswordControl.updateValueAndValidity();
});
}
if (passwordControl.value !== confirmPasswordControl.value) {
return { notMatch: true };
}
return null;
};
}
您必须将验证器导入到 component.ts 文件中
关于angular - 响应式(Reactive)表单确认密码和确认电子邮件验证器 Angular 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52527598/