带有嵌套字段的 Angular8 和 formControlName答案

【问题标题】：Angular8 and formControlName with nested fields带有嵌套字段的 Angular8 和 formControlName
【发布时间】：2020-10-16 01:15:03
【问题描述】：

我花了很多时间来解决这个问题。我的formGroup 结构是：

 this.frameworkForm = this.formBuilder.group({
      id: [null],
      name: ['', Validators.required],
      active: [true],
      parsingRequired: [false],
      reviewRequired: [false],
      frameworkSortingType: {
        id: null,
        environmentalSortingType: '',
        socialSortingType: '',
        governanceSortingType: '',
      },
    });

在我的模板中，我想从例如获取价值。 environmentalSortingType:

     <div class="alphabetically">
                      <label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
                      <div class="p-field-radiobutton">
                        <p-radioButton [name]="'environmental'" value="alphabetically"
                                       formControlName="frameworkSortingType.environmentalSortingType"
                        ></p-radioButton>

 <p-radioButton [name]="'environmental'" value="numerically"
                                   formControlName="frameworkSortingType.environmentalSortingType"
                    ></p-radioButton>
                      </div>

但是像formControlName="frameworkSortingType.environmentalSortingType" 这样的. 解决方案不起作用。怎么做？我尝试了很多不同的方法......没有成功:(

更新

我通过添加嵌套的 formGroup 更改了我的代码，但仍然出现错误：找不到具有未指定名称属性的控件 (<div class="sorting" formGroupName="frameworkSortingType">)

 ngOnInit() {
    this.frameworkForm = this.formBuilder.group({
      id: [null],
      name: ['', Validators.required],
      active: [true],
      parsingRequired: [false],
      reviewRequired: [false],
      frameworkSortingType: this.formBuilder.group( {
        id: null,
        environmentalSortingType: '',
        socialSortingType: '',
        governanceSortingType: '',
      }),
    });

还有我的模板：

  <div class="sorting" formGroupName="frameworkSortingType">
                <div class="alphabetically">
                  <label class="control-label bold-label" for="reviewRequired">Alphabetically</label>
                  <div class="p-field-radiobutton">
                    <p-radioButton [name]="'environmental'" value="alphabetically"
                                   formControlName="environmentalSortingType"
                    ></p-radioButton>
                  </div>

【问题讨论】：

问题是你使用了变量frameworkSortingType如下。 <div formGroupName="frameworkSortingType">。你需要仔细看图。应该完成<div [formGroup]="frameworkSortingTypes">
在那个div里面，定义属于frameworkSortingTypes的formControls。

标签： angular typescript forms formgroups

【解决方案1】：

基于此article，您可以将frameworkSortingType 设为新的FormGroup，并在主formGroup 中使用此formGroup，如下所示。

【讨论】：