錯誤：找不到帶有路徑的控件：'FormArray -> FormControlName' Angular

Question

這是我的表單的結構：

this.formData = new FormGroup({
  selectedAnimal: new FormArray([], [Validators.required]),
  selectedTransport: new FormArray([], [Validators.required]),
  roadName: new FormControl({ disabled: true, value: null }, Validators.required),
  roadZip: new FormControl({ disabled: true, value: null }, Validators.required),
  planeName: new FormControl({ disabled: true, value: null }, Validators.required),
  planeZip: new FormControl({ disabled: true, value: null }, Validators.required)
});

對應HTML

<form [formGroup]="formData" (ngSubmit)="onSubmit()">
  <div class="animal-checkbox-group" formArrayName="selectedAnimal">
    <!-- multiple checkbox options, selecting one is mandatory -->
  </div>

  <div class="animal-checkbox-group" formArrayName="selectedTransport">
    <!-- multiple checkbox options, selecting one is mandatory -->
    <div class="if-checkbox-1-selected">
      <!-- conditional checkbox: if checkbox is selected -> new new form controls -> they should be defined for successful validation -->
      <input type="text" formControlName="roadName">
    </div>
  </div>
</form>

錯誤：

錯誤錯誤：找不到帶有路徑的控件：'selectedTransport -> roadName'

stackblitz 工作示例

Answer 1

在您的情況下，控件呈現在 formarray 抽象控件內，因此您必須為所有控件名稱提供表單組，如下所述：

<div [formGroup]="formData">
    Road Name: <input type="text" formControlName="roadName">
</div>

這是工作代碼： stackblitz