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

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 };
}