具有嵌套字段的 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: '',
      },
    });

在我的模板中，我想从 eg 中获取价值。 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>

Answer 1

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

具有嵌套字段的 Angular8 和 formControlName

Angular8 and formControlName with nested fields

forms

typescript

angular

formgroups