Angular 当FormGroup出现新错误时，不更新窗体

因此，我在ngOnInit（）中声明了我的FormGroup，并调用了我的验证器函数，以确保password和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方法，除了一件事之外，其他一切都很好。我的confirm password（确认密码）字段似乎从未识别出密码不匹配时满足的条件，如果字段中没有任何内容，他们会抱怨，因为这是必需的，但只要我在输入中添加一个值，错误消息就会消失，并且不会像应该的那样触发第二个跨度

我的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>

确认密码
请确认密码
密码不匹配

第一个ngIf检查确认密码无效。 第二个ngIf位于同一范围内，并检查其是否有效

如果它是无效的，它将永远无效

将最后一个移动到密码不匹配范围的上方

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

请确认密码
密码不匹配