Angular4：尽管字段中没有错误，但表单无效（使用自定义验证）答案

【问题标题】：Angular4: Form invalid despite no errors in fields (using custom validation)Angular4：尽管字段中没有错误，但表单无效（使用自定义验证）
【发布时间】：2018-05-20 06:04:04
【问题描述】：

我正在尝试使用自定义验证来验证表单。出于某种原因，我必须构建一个可以更改电子邮件或设置新密码的表单。出于这个原因，我不能使用 Validators.required，因为密码字段只有在被触摸时才需要。

我的问题是，当输入验证得到解决时，表单仍然无效。

我制作了一个 plnkr 来演示我的问题：
http://plnkr.co/edit/obF4gC5RHkXOOlCEsIuH?p=preview

ngOnInit(): void {
    this.emailField = new FormControl('mail@mail.com', Validators.email);
    this.pw1 = new FormControl('', [this.passwordAreEqualValidator, Validators.minLength(2)]);
    this.pw2 = new FormControl('', this.passwordAreEqualValidator);
    this.pwOld = new FormControl('', this.notEmptyIfNewIsTouchedValidator);

    this.form = this.formBuilder.group({
      pw1: this.pw1,
      pw2: this.pw2,
      emailField: this.emailField,
      pwOld: this.pwOld
    });
  }

notEmptyIfNewIsTouchedValidator(control: FormControl) : ValidationErrors | null {
    if (control.dirty) {
      if (control.value === '') {
        return {
          oldPasswordEmpty: true
        }
      }

      const parent = control.parent,
            pw1 = parent.get('pw1'),
            pw2 = parent.get('pw2');

      // this will trigger nothing in template, this part is only
      // to mark form invalid if password was entered. passwordNew1
      // cannot be false by default as this is okay when you only
      // want to change your e-mail adress.
      if (pw1.value.length === 0) {
        pw1.setErrors({noPassword: true});
      } else {
        if (pw1.hasError('noPassword')) {
          let pw1Errors = pw1.errors;
          delete pw1Errors.noPassword;  
          pw1.setErrors(pw1Errors);
        }
      }

      console.log('pw1 errors: ', pw1.errors);
      console.log('pw2 errors: ', pw2.errors);
      console.log('old errors: ', control.errors);
    }

    return null;
  }

  passwordAreEqualValidator(control: FormControl): ValidationErrors | null {
    if (control.dirty) {
      const
        parent = control.parent,
        pwOld = parent.get('pwOld'),
        pw1 = parent.get('pw1'),
        pw2 = parent.get('pw2');

      if (pwOld.value === '') {
        pwOld.setErrors({oldPasswordEmpty: true})
      }

      if (pw1.value !== pw2.value) {
        return {
          notEqual: true
        };
      } else {
        let pw1Errors = pw1.errors;

        if (pw1.hasError('notEqual')) {
          delete pw1Errors.notEqual;
          pw1.setErrors(pw1Errors);
        }

        if (pw1.hasError('noPassword')) {
          delete pw1Errors.noPassword;
          pw1.setErrors(pw1Errors);
        }

        pw2.setErrors(null);

        console.log('pw1 errors: ', pw1.errors);
        console.log('pw2 errors: ', pw2.errors);
        console.log('old errors: ', pwOld.errors);
      }
    }

    return null;
  }

重现步骤：

输入密码（错误旧密码为空）
重复密码（错误密码不相等，直到两个密码匹配）
一旦您的重复密码匹配，请为旧密码添加一个值（错误旧密码已被删除）
所有验证错误均已删除，但表单仍然无效。

为什么我的表单无效？

P.S：一旦我再次编辑我的 pw1，我的表单就会生效，尽管错误的结果没有改变。

【问题讨论】：

标签： angular custom-validators

【解决方案1】：

您在两个字段上都设置了验证器.....当您输入 pw2 时 pw1 不会重新验证，因此 pw1 在您返回并再次输入之前仍然无效。

在您的组件中，在您的 ngOnInit 末尾，您可以添加以下内容....

    this.pw1.valueChanges().subscribe(() => this.pw2.updateValueAndValidity());
    this.pw2.valueChanges().subscribe(() => this.pw1.updateValueAndValidity());

【讨论】：