Question

我有这个FormGroup：

{
  "action.281": {
    "section.267": {
      "loop.1": {
        "default": {
          "form.885": []
        }
      },
      "loop.2": {
        "default": {
          "form.885": []
        }
      }
    },
    "section.275": {
      "loop.1": {
        "default": {
          "form.891": ""
        }
      }
    },
    "section.276": {
      "loop.1": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
      "loop.2": {
        "section.277": {
          "loop.1": {
            "default": {
              "form.894": ""
            }
          }
        },
        "default": {
          "form.892": "",
          "form.893": ""
        }
      }
    }
  }
}

我想从多个组件（父组件和子组件）中使用它。这是我的父html组件：

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
      <div *ngFor="let section of sections">
        <app-section [section]="section" [action]="action"></app-section>
      </div>
  </div>
</div>

还有我的孩子html组件：

<div class="app-section">
<fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
              <div *ngFor="let question of loop.questions" class="form-group">
                <input class="form-control" [formControlName]="'form.' + question.id" />
              </div>
            </div>
          </fieldset>
       </fieldset>
</div>

但是我收到错误“错误错误：找不到名称为'section.267'的控件”，依此类推。如何使用子组件链接父FormGroup和父FormGroupName？

Answer 1

您不能隐式执行此操作。但是您可以显式传递表单组（或其相关的子级）并将其用作子组件的输入参数：

父母：

<div class="app-form-action-param" [formGroup]="objectForm">
    <div [formGroupName]="'action.' + action.id">
        <div *ngFor="let section of sections">
            <app-section [section]="section" [action]="action"
                         [actionForm]="objectForm.controls['action.' + action.id]">
            </app-section>
        </div>
    </div>
</div>

孩子：

<div class="app-section" [formGroup]="actionForm">
    <fieldset [formGroupName]="'section.' + section.id">
        <fieldset *ngFor="let loop of section.loops" [formGroupName]="'loop.' + loop.id">
            <div [formGroupName]="'default'">
                <div *ngFor="let question of loop.questions" class="form-group">
                    <input class="form-control" [formControlName]="'form.' + question.id" />
                </div>
            </div>
        </fieldset>
    </fieldset>
</div>

那只是每个模板的一个附加属性-您需要将actionForm声明为子组件的@Input参数。起初，这种额外的声明可能显得多余或不必要。但是是必要的，以确保子组件是独立的并提供定义良好的接口。（因为它依赖于此，所以组件接口的一部分无论如何都是表单。只有明确表明该依赖关系才有意义。）

子组件中的FormControlName

1 个答案: