我们如何在angular中处理表单组密码匹配

Question

如果密码在2个输入字段之间的角度11中匹配，我们该如何处理？用户将从密码fried输入，如果用户在第二个字段上输入，则如果匹配或错误，则应显示消息。你们知道吗？

#ts

this.signupForm = this.fb.group({
password: [
'',
[
this.validatePasswordRequired,
this.validateMinimumPassword,
this.validatePasswordUpperCase,
this.validatePasswordLowerCase,
this.validatePasswordSpecialCharacter,
this.validateOneNumber
]
],
passwordConfirm:[
Validators.required
]
});

#html

<mat-form-field class="full-width" appearance="fill">
<mat-label>New password</mat-label>
<input matInput formControlName="password" type="{{(showPassword === false)?'password':'text'}}">
<mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword()">
{{!showPassword?'visibility':'visibility_off'}}</mat-icon>
<mat-error *ngIf="password.hasError('required')">
{{errFormMsg.REQUIRED}}
</mat-error>
</mat-form-field>
<mat-form-field class="full-width" appearance="fill">
<mat-label>Password</mat-label>
<input matInput formControlName="passwordConfirm" type="{{(showPassword === false)?'password':'text'}}">
<mat-icon matSuffix style="cursor: pointer;" (click)="toggleShowPassword()">
{{!showPassword?'visibility':'visibility_off'}}</mat-icon>
<mat-error *ngIf="password.hasError('required')">
{{errFormMsg.REQUIRED}}
</mat-error>
</mat-form-field>

Answer 1

正如我所看到的，您已经定义了自定义验证器。您只需在passwordConfirm上添加另一个验证程序，即可检查是否相等。在验证器中，只需从第一个中获取值，并将其与当前值进行比较。

在ts.中添加此功能

equalWithPasswordValidator(): ValidatorFn {
return (control: AbstractControl): ValidationErrors | null => {
const equal = control.value === this.signupForm.get("password").value;
return equal ? {notEqual: {value: "Passwords do not match"}} : null;
};
}

并将其添加到您的FormGroup创建中

passwordConfirm:[ '',
[Validators.required, this.equalWithPasswordValidator]
]

在html中添加类似于此的内容

<mat-error *ngIf="signupForm.get('passwordConfirm').hasError('notEqual')">
<!-- your Error Message -->
</mat-error>