Angular 角度8嵌套FormBuilder可以'；找不到控制

我正在尝试迭代8中FormBuilder中的值 路径为FormGroup->FormArray->FormGroup->FormArray 但我有一个错误： 找不到路径为“条件->2->值->0->对象”的控件。 我尝试了很多组合，但没有一个有效

在我的组件中：

conditionsForm: FormGroup;
  conditionForm: FormArray;
  conditionValuesForm: FormArray;

  ngOnInit() {
    this.conditionsForm = this.formBuilder.group({
      conditions: this.formBuilder.array([this.createConditionForm()])
    });
  }

  createConditionForm(): FormGroup {
    return this.formBuilder.group({
      type: "",
      operator: "",
      values: this.formBuilder.array([this.createConditionValuesForm()])
    });
  }

  createConditionValuesForm(): FormGroup {
    return this.formBuilder.group({
      value: ""
    });
  }

  addConditionForm(): void {
    this.conditionForm = this.conditionsForm.get("conditions") as FormArray;
    this.conditionForm.push(this.createConditionForm());
  }

  addConditionValuesForm(): void {
    this.conditionValuesForm = this.conditionForm.get("values") as FormArray;
    this.conditionValuesForm.push(this.createConditionValuesForm());
  }

在我的模板中：

<form [formGroup]="conditionsForm" class="row container-condition">
    <div formArrayName="conditions" *ngFor="let condition of conditionsForm.get('conditions').controls; let i_condition = index">
        <div class="row row-condition" [formGroupName]="i_condition">
            <!-- INPUT VALUE -->
            <div [formGroup]='condition'></div>
            <div formArrayName="values" *ngFor="let value of condition.get('values').controls; let i_value = index">
                <div [formGroupName]="i_value">
                    <mat-form-field class="example-full-width">
                        <input matInput placeholder="Value" value="" [formControlName]="value.value">
                    </mat-form-field>
                </div>
            </div>
        </div>
    </div>
    <button (click)="addConditionForm()">Add condition</button>
    <button type="button" (click)="printMyForm()">Print to console</button>
</form>

附加条件
打印到控制台

查看此处了解详细信息。过去已答复

---

查看此处了解详细信息。该问题在过去已得到解答。

您的代码中似乎存在一些与此无关的其他问题，您没有正确地将表单视为数组数组，但此特定错误的修复方法在此处

<input matInput placeholder="Value" formControlName="value">

---

您的最终

formControlName

只是值。

您的代码中似乎存在一些与此无关的其他问题，您没有正确地将表单视为数组数组，但修复此特定错误的方法就在这里

<input matInput placeholder="Value" formControlName="value">

---

最后的

formControlName

只是值。

对html的细微更改：

<form [formGroup]="conditionsForm">
    <div
     formArrayName="conditions"
     *ngFor="let condition of conditionsForm.get('conditions').controls; let i_condition = index">
        <div [formGroupName]="i_condition"> <!-- correctly binding dynamic index variable -->
            <!-- also note this: 'condition' is not a valid group name within the group you created for the 'conditions' array. --> 
            <!-- <div [formGroup]='condition'></div> --> 

          <input type="text" formControlName="type" placeholder="type"> <!-- hardcoded 'type' control name, as it is steady with all groups within 'condition' -->
          <input type="text" formControlName="operator" placeholder="operator">
            <div
             formArrayName="values"
             *ngFor="let value of condition.get('values').controls; let i_value = index">
                <div [formGroupName]="i_value"> <!-- correctly binding dynamic index -->
 <!-- instead of [formControlName]="value.value", which would approach to your ts file and look for a control in an object like this: value = {value: new FormControl()...} -->
                  <input placeholder="Value" value="" formControlName="value">
                </div>
            </div>
        </div>
    </div>
</form>

和html格式

<!-- property binding -->
<form [formGroup]="myForm"/>
   <!-- literal binding because parent is declared and known (myForm) -->
   <input formControlName="myInput"/>
   <!-- literal binding because parent is declared and known (myForm) -->
   <div formGroupName="myGroup">
   <!-- literal binding because parent is declared and known (myGroup) -->
      <input formControlName="nestedInput"/>
   </div>
   <!-- literal binding because parent is declared and known (myForm) -->
   <div formArrayName="myArray" *ngFor="let control of myForm.get('myArray').controls; let i_control = index">
   <!-- property binding because items in array are accessed by index, and not by name, and is generated on the fly, nowhere declared in your code (and shouldn't be) -->
      <input [formControlName]="i_control"/>
      <!-- or -->
      <div [formGroupName]="i_control">
        <!-- literal binding because parent is known by name (i_control) -->
        <input formControlName="myInputInOneOfTheGroupsOfMyArray"/>
      </div>
   </div>
</form>

---

：

对html的轻微更改：

<form [formGroup]="conditionsForm">
    <div
     formArrayName="conditions"
     *ngFor="let condition of conditionsForm.get('conditions').controls; let i_condition = index">
        <div [formGroupName]="i_condition"> <!-- correctly binding dynamic index variable -->
            <!-- also note this: 'condition' is not a valid group name within the group you created for the 'conditions' array. --> 
            <!-- <div [formGroup]='condition'></div> --> 

          <input type="text" formControlName="type" placeholder="type"> <!-- hardcoded 'type' control name, as it is steady with all groups within 'condition' -->
          <input type="text" formControlName="operator" placeholder="operator">
            <div
             formArrayName="values"
             *ngFor="let value of condition.get('values').controls; let i_value = index">
                <div [formGroupName]="i_value"> <!-- correctly binding dynamic index -->
 <!-- instead of [formControlName]="value.value", which would approach to your ts file and look for a control in an object like this: value = {value: new FormControl()...} -->
                  <input placeholder="Value" value="" formControlName="value">
                </div>
            </div>
        </div>
    </div>
</form>

和html格式

<!-- property binding -->
<form [formGroup]="myForm"/>
   <!-- literal binding because parent is declared and known (myForm) -->
   <input formControlName="myInput"/>
   <!-- literal binding because parent is declared and known (myForm) -->
   <div formGroupName="myGroup">
   <!-- literal binding because parent is declared and known (myGroup) -->
      <input formControlName="nestedInput"/>
   </div>
   <!-- literal binding because parent is declared and known (myForm) -->
   <div formArrayName="myArray" *ngFor="let control of myForm.get('myArray').controls; let i_control = index">
   <!-- property binding because items in array are accessed by index, and not by name, and is generated on the fly, nowhere declared in your code (and shouldn't be) -->
      <input [formControlName]="i_control"/>
      <!-- or -->
      <div [formGroupName]="i_control">
        <!-- literal binding because parent is known by name (i_control) -->
        <input formControlName="myInputInOneOfTheGroupsOfMyArray"/>
      </div>
   </div>
</form>

: