Angular 当 FormGroup 出现新错误时，反应式表单不会更新

Question

所以我在 ngOnInit() 中声明了我的 FormGroup 并调用了我的验证器函数以确保密码和 confirmPassword 字段如此匹配

我的打字稿

regForm: FormGroup;
  constructor() { }

  ngOnInit() {
    this.regForm = new FormGroup({
      userName: new FormControl('Mark', Validators.required),
      email: new FormControl(null, [Validators.required, Validators.email]),
      password: new FormControl(null, [Validators.required, Validators.minLength(8)]),
      confirmPassword: new FormControl(null, Validators.required),
      mobile: new FormControl(null, [Validators.required, Validators.minLength(10)]),
    }, this.passwordMatchingValid);
  }

  // validators return null if the condition is valid and a json object {key: value} if condition is false
  passwordMatchingValid(fg: FormGroup) : Validators
  {
    return fg.get('password').value === fg.get('confirmPassword').value ? null :
    {
      // {key : value}
      notmatched: true
    };
  }

所有字段也都有自己的 getter 方法，除一件事外一切正常。当密码不匹配时，我的确认密码字段似乎永远不会识别满足的条件，如果该字段中没有任何内容，他们会抱怨，因为它是必需的，但是只要我在输入中添加一个值，错误消息就会消失并且它没有像它应该的那样触发第二个跨度。

我的html

          <label for="cpassword" class="form-label">Confirm Password</label>
          <input type="password" class="form-control" formControlName="confirmPassword">

          <span *ngIf="!confirmPassword.valid && confirmPassword.touched" class="error-block">
            <span *ngIf="confirmPassword.hasError('required')">
              Please confirm password
            </span>

            <!-- Check the passwordMatchingValid method, because validators return null if the conditon is true, it will not be detected as an error -->
            <span *ngIf="confirmPassword.valid && regForm.hasError('notmatched')">
              Password not matched
            </span>
          </span>

Answer 1

第一个 ngIf 检查确认密码无效。第二个 ngIf 在同一个 span 中并检查它是否有效。

如果无效，则永远无效。

移动密码不匹配跨度上方的最后一个。

<span *ngIf="!regForm.controls.confirmPassword.valid && regForm.controls.confirmPassword.touched" class="error-block">
     <span *ngIf="regForm.controls.confirmPassword.hasError('required')">
          Please confirm password
     </span>
</span> <-- move the last span here instead -->
<span *ngIf="regForm.controls.confirmPassword.valid && regForm.hasError('notmatched')">
   Password not matched
</span>

Angular 当 FormGroup 出现新错误时，反应式表单不会更新

Angular Reactive form not updating when FormGroup has new error

angular

angular-reactive-forms

angular-custom-validators