angular - 如何让 FormControl 重新检查具有响应式表单的 FormGroup 的验证

Question

我正在了解 Angular 9 Reactive 表单的表单验证。

我有一个 react 形式的形式组。我的表单中只有2个输入元素，表单控件areaNameFormComponent和areaDescriptionFormComponent组成了这个表单。在他们提交之前，我还想确保他们从嵌套在表单内的组件中选择了至少一种状态。我的第三个 FormControl“statesChosenFormComponent”与此相关，但我无法让 FormGroup 再次检查其验证以查看“statesChosen”数组是否添加了任何状态。

    this.naturalAreaFormGroup = new FormGroup({
  areaNameFormComponent: new FormControl('', [Validators.required]),
  areaDescriptionFormComponent: new FormControl('', [Validators.required]),
  statesChosenFormComponent: new FormControl('stateschosen', [this.checkForStatesChosen()])
});



checkForStatesChosen(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
  const forbidden = this.statesChosen.length === 0;
  if (!forbidden) {
    alert('not forbidden')
    return null;
  } else {
    alert('forbidden');
    return {nostatechosen: {value: control.value}};
  }
  // return forbidden ? {nostatechosen: {value: control.value}} : null;

};

}

<p>natural-area-add works!</p>
<br />
<div *ngIf='stateChosen'>
State Chosen: {{stateChosen.name}}
</div>
<br />
Add state to area:
<app-states (stateChangedEvent)="stateChanged($event)" ></app-states>
<button (click)="addStateToArea()">Add state</button>


<br />
<form [formGroup]="naturalAreaFormGroup" (ngSubmit)="addNaturalArea()">
  statesChosen: {{statesChosen}}
  <ul>
    <li  *ngFor="let state of statesChosen">{{state.name}}</li>
  </ul>

  Area Name: <input formControlName="areaNameFormComponent"/>
  <br />
  Area Description: <input formControlName="areaDescriptionFormComponent"/>

  <button type="submit" [disabled]="naturalAreaFormGroup.invalid">Add Natural Area</button>

</form>

这里的主要问题似乎是我试图将 FormControl 用于不是表单组件的东西，因为它只是一个数组，我想检查该数组中是否有任何元素，但我不知道如何使表单组无效，直到该数组中包含元素，并且我需要表单组在将元素添加到数组后重新检查验证。

Answer 1

您可以使用updateValueAndValidity来执行此操作

areaNameFormComponent: AbstractControl;
areaDescriptionFormComponent: AbstractControl;
statesChosenFormComponent: AbstractControl;

constructor() {
    this.areaNameFormComponent = this.naturalAreaFormGroup.controls['areaNameFormComponent'];
    this.areaDescriptionFormComponent = this.naturalAreaFormGroup.controls['areaDescriptionFormComponent'];
    this.statesChosenFormComponent = this.naturalAreaFormGroup.controls['statesChosenFormComponent'];
}

ngOnInit() {
    this.naturalAreaFormGroup.get('areaNameFormComponent').valueChanges.subscribe(()=> revalidate());
    this.naturalAreaFormGroup .get('areaDescriptionFormComponent').valueChanges.subscribe(()=> revalidate());
    this.naturalAreaFormGroup .get('statesChosenFormComponent').valueChanges.subscribe(()=> revalidate());
}

revalidate(){
    this.areaNameFormComponent.updateValueAndValidity();
    this.areaDescriptionFormComponent.updateValueAndValidity();
    this.statesChosenFormComponent.updateValueAndValidity();
}