angular - Angular 9 - 在反应式表单控件上手动设置错误不会改变表单状态

Question

我正面临着某种我无法解决的 Angular 反应形式的场景。我在表单控件上手动设置错误，我希望这会将表单状态更改为无效，但事实并非如此。我尝试执行 markAsTouched() 和 updateValueAndValidty() 方法但没有成功。如果这是 Angular 响应式表单应该如何工作，或者我的代码是否有问题，我会忽略。

这是目前的架构：

父组件创建一个表单组。子组件接收表单组作为输入属性。在子组件的模板中，我使用第三方组件来动态呈现表单字段的集合。遗憾的是，我无法将表单组直接绑定到第三方组件，但我知道第三方表单何时有效。我正在尝试使用此信息手动更新我的表单组状态。

父组件控制器

  export class ParentComponent implements OnInit {

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
       this.form = this.fb.group({
        firstControl: [],
        secondControl: [],
    });
}

}

父组件模板

<app-child-component
  [formGroup]="form">
</app-child-component>

子组件控制器

export class ChildComponent implements AfterViewInit {

  @Input() formGroup: FormGroup;

  @ViewChild('thirdPartyForm') thirdPartyForm: NgForm;

  private thirdPartyFormStatusChangeSubscription$: Subscription;

  ngAfterViewInit() {
    this.thirdPartyFormStatusChangeSubscription$ = this.thirdPartyForm.statusChanges.subscribe(status => {
      this.onStatusChanges(status);
    });
  }

  private onStatusChanges(status: string){
    if (status === 'INVALID') {
        this.thirdPartyForm.controls.firstControl.setErrors({'invalid': true})
        console.log(this.thirdPartyForm.valid); // true despite the error!
    }
}

子组件模板

<form #thirdPartyForm="ngForm">
  <app-third-party-form-wrapper
    [form]="thirdPartyForm" 
    [formFields]="formFields">
  </app-third-party-form-wrapper>
</form>

在子组件的控制器中，每次表单状态发生变化时都会正确执行 onStatusChanges 方法。当状态也无效时，会正确调用 setErrors 方法。但是，尽管出现错误，表单状态永远不会无效。如上所述，我尝试使用希望刷新状态的方法组合，但我从未成功：

this.form.controls.firstControl.setErrors({invalid: true});
this.form.markAsTouched();
console.log(this.form.valid) // still true!
this.form.updateValueAndValidity()
console.log(this.form.valid) // still true!

简而言之：在表单控件上手动设置错误时，表单状态是否应该改变？如果是，我的代码有什么问题？

标签： angularangular-reactive-forms