嵌套反应形式 - 错误错误：找不到带有路径的控件答案

【问题标题】：Nested reactive forms - ERROR Error: Cannot find control with path嵌套反应形式 - 错误错误：找不到带有路径的控件
【发布时间】：2021-05-24 18:43:21
【问题描述】：

我无法弄清楚我在这里做错了什么。我不断收到：错误错误：找不到带有路径的控件：'Properties -> 2 -> SelectOptions -> Url'。

我已经搜索了类似的问题，但我找不到问题所在

HTML：

<form [formGroup]="configForm" style="overflow: auto;">
                <div class="center">
                    <mat-form-field appearance="outline" class="input-field">
                        <mat-label>Display name</mat-label>
                        <input formControlName="DisplayName" matInput>
                    </mat-form-field>
                    <h3 style="margin: 0;">Properties:</h3>
                    <div formArrayName="Properties" *ngFor="let item of properties.controls; let i = index;" class="outline-inputs">

                        <div [formGroupName]="i">
                            <mat-form-field class="input-field">
                                <mat-label>ID</mat-label>
                                <input formControlName="Id" matInput>
                            </mat-form-field>

                            <ng-container *ngIf="item.get('SelectOptions')?.value">
                                <div formGroupName="SelectOptions">
                                    <h3 style="margin: 0;">Select options:</h3>
                                    <mat-form-field class="input-field">
                                        <mat-label>Url</mat-label>
                                        <input formControlName="Url" matInput>
                                    </mat-form-field>
                                </div>
                            </ng-container>
                        </div>
                    </div>
                    
                </div>
            </form>

这就是我创建表单 .ts 的方式：

get properties() { return this.configForm.controls.Properties as FormArray; }
configData(data: ConfigurationType){

this.configForm.get("DisplayName").setValue(data.DisplayName);

for (const item of data.Properties) {
  if( item.SelectOptions ){
    this.properties.push(this.formBuilder.group({
      Id: [item.Id, Validators.required]
      SelectOptions: [this.formBuilder.group({
        Url: [item.SelectOptions.Url, Validators.required]
      })]
    }))
  } else {
    this.properties.push(this.formBuilder.group({
      Id: [item.Id, Validators.required]
    })) 
  }
}

}

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

一般来说，JSON 数组的每个元素应该具有相同的结构。还有一个 FormArray。你尝试为每个元素创建一个具有不同结构的 FormArray。我建议您始终创建 formGroup，其值为 Url，例如字符串“null”（或“no-url”），并检查该值

for (const item of data.Properties) {
    this.properties.push(this.formBuilder.group({
      Id: [item.Id, Validators.required]
      SelectOptions: [this.formBuilder.group({
        Url: [item?.SelectOptions?item.SelectOptions.Url:'no-url',
                Validators.required]
      })]
    }))
}

顺便说一句，我喜欢使用“get”方法而不是使用控件：

get properties() { 
  return this.configForm.get('Properties') as FormArray; 
}

还有标签“formArrayName 和 formGroup”的方式

<!--in a div the formArrayName-->
<div formArrayName="Properties">
 <!--if the *ngFor the [formGroupName]="i"-->
  <div *ngFor="let item of properties.controls; let i = index;" 
     [formGroupName]="i" class="outline-inputs">
      ...
      <ng-container *ngIf="item.get('SelectOptions').value!='no-url'">
      </ng-container>
  <div >
</div>

【讨论】：