Question

我已经创建了如下角度的反应形式，我的问题是如果密码不匹配，我想禁用表单提交按钮。

表单提交按钮代码

<button [disabled]="changePasswordForm.invalid">Change password</button>

反应式表单代码

this.changePasswordForm = this.fb.group({
     oldPassword: ['', [Validators.required, Validators.minLength(10)]],
     newPassword: ['', [Validators.required, Validators.minLength(10)]],
     newConfirmPassword: ['', [Validators.required, Validators.minLength(10)]]
}, {
     validator: this.passwordMatchValidator
});

密码验证码

passwordMatchValidator(AC: AbstractControl) {
    let newPassword = AC.get('newPassword').value;
    let newConfirmPassword = AC.get('newConfirmPassword').value;
    if (newPassword !== newConfirmPassword) {
      console.log("Passwords doesn't match.");
    } else {
      console.log("Passwords matched.");          
    }
 }

在用户输入最小长度为10个字符的密码之前，表单的提交按钮不会启用。但即使密码不匹配，表单按钮也会启用。我在这里缺少什么逻辑？

感谢您的帮助。

Answer 1

您的签名是passwordMatchValidator(AC: AbstractControl)，但您似乎将验证者绑定到您的表单。

否则，您没有从验证器返回任何内容，您希望它如何验证？试试这个。

passwordMatchValidator(AC: AbstractControl) {
  let newPassword = AC.get('newPassword').value;
  let newConfirmPassword = AC.get('newConfirmPassword').value;
  return { passwordMismatch: newPassword !== newConfirmPassword };
}

自定义验证不会禁用表单提交按钮 - 角度5

1 个答案: