angular - 带有嵌套字段的 Angular8 和 formControlName

Question

我花了很多时间来解决这个问题。我的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>

但是那种带有.like 的解决方案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>

标签： angulartypescriptformsformgroups

Answer 1

根据这篇文章，您可以在主 formGroup 中创建frameworkSortingType一个新FormGroup的 formGroup 并使用它，如下所示。