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

Question

我已经在 angular 中创建了响应式表单，如下所示，我的问题是如果密码不匹配，我想禁用表单提交按钮。

表单提交按钮代码

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

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

Custom validation not disabling the form submit button - angular 5

javascript

typescript

angular

angular-reactive-forms