注冊按鈕僅在 signupForm 有效時啟用，但現在我有一個問題，即使密碼和確認密碼不匹配，該按鈕仍在啟用
是我的 this.equalWithPasswordValidator。執行錯誤？
任何的想法 ？謝謝。
#html代碼
<button mat-raised-button class="full-width v-btn-lrg mt-0px" color="primary" type="submit"
[disabled]="signupForm.invalid">
{{labels.BUTTON.SETUP}}
</button>
#ts 代碼
this.signupForm = this.fb.group({
confirmPassword: [
'',
[Validators.required, this.equalWithPasswordValidator.bind(this)],
],
password: [
'',
[
this.validatePasswordRequired,
this.validateMinimumPassword,
this.validatePasswordUpperCase,
this.validatePasswordLowerCase,
this.validatePasswordSpecialCharacter,
this.validateOneNumber,
],
],
});
}
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;
};
}
uj5u.com熱心網友回復：
您需要將驗證器應用于 FormGroup，以便您可以訪問這兩個控制元件。這是創建驗證器以比較兩個欄位的一種方法......
// component
form = new FormGroup({
password: new FormControl('', [ yourValidators... ]),
confirmPassword: new FormControl('', [ yourValidators... ])
}, {
validators: [ equivalentValidator('password', 'confirmPassword') ]
});
// equivalent.validator.ts
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
export const equivalentValidator = (firstControlName: string, secondControlName: string): ValidatorFn => {
return (control: AbstractControl): ValidationErrors | null => {
const firstControl = control.get(firstControlName);
const secondControl = control.get(secondControlName);
if (secondControl.value && secondControl.value !== firstControl.value) {
secondControl.setErrors({ notEqual: true });
}
return null;
};
};
在這個例子中，如果第二個欄位與第一個欄位不匹配，我只會在第二個欄位上設定錯誤。我沒有在此處設定錯誤訊息，而是設定了一個錯誤，notEqual以便驗證器可以跨表單重復使用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326553.html