嵌套的角度形式找不到 FormGroup

Question

我在 *ngIf 下有模板，它只在表单加载后生成。此外，我在动态显示的字段下得到了失败的表单，这取决于按下按钮。我注销表单，它会返回正确丢失的 FormControl。

模板：

<div *ngIf="ready">
 <form [formGroup]="form">
        <div [formGroup]="form.controls.request">
          <div *ngFor="let field of inputFields">
            ...
          </div>
        </div>

        <div *ngIf="somethingEnabled">
          <div [formGroup]="form.controls.Something">
            <div class="input-container">
              <label>Name: </label>
              <input formControlName="Name">
            </div>

            <div [formGroup]="form.controls.Something.Organization">

              <div class="input-container">
                <label>ASD: </label>
                <input formControlName="ASD">
              </div>

              <div [formGroup]="form.controls.Something.Organization.Other">
                <div class="input-container">
                  <label>Id: </label>
                  <input formControlName="Id">
                </div>

                <div [formGroup]="form.controls.Something.Organization.Other.SchmeNm">

                  <div class="input-container">
                    <label>SchmeName: </label>
                    <input formControlName="SchmeName">
                  </div>

                  <div class="input-container">
                    <label>SchmeValue: </label>
                    <input formControlName="SchmeValue">
                  </div>

                </div>
              </div>
            </div>

          </div>
        </div>
      </form>
    </div>

代码：

 generateForm() {
    this.form = this.fb.group({
      request: this.fb.group(
        this.generateRequestFields())
      ,
      Something: this.fb.group(this.generateSomething()),
      address: this.fb.group(
        this.generateAddress()
      )
    });
  }

  generateSomething() {
    const returnObject = {};
    returnObject['Name'] = new FormControl();
    returnObject['Organization'] = this.fb.group(this.generateOrganization());
    return returnObject;
  }

  generateOrganization() {
    const returnObject = {};
    returnObject['ASD'] = new FormControl();
    returnObject['Other'] = this.fb.group({
      Id: new FormControl(),
      Schme: this.fb.group({
        SchmeName: new FormControl(),
        ShcmeValue: new FormControl()
      }),
      Issr: new FormControl()
    });
    return returnObject;
  }

我只在激活 form.controls.something 部分时收到错误消息。 如果我删除模板的 form.controls.Something.Organization 部分，它可以正常工作。

错误： ERROR 错误：formGroup 需要一个 FormGroup 实例。请传一个。

我可能只是错过了一些东西，并希望我能在发布此内容时找到它，但似乎仍然无法得到它

Answer 1

对于嵌套的 formGroups，使用 formGroupName 而不是 formGroup。

Answer 2

当您在 formGroup 中时，您不需要访问父表单的控件来定义它的子表单组，您只需使用名称即可

<form [formGroup]="form">
        <div [formGroup]="request">
          <div *ngFor="let field of inputFields">
            ...
          </div>

Answer 3

如果你console.log(this.form.controls.Something.Organization) 可能也会返回未定义。对于您添加的每个 FormGroup，您必须先访问其控件，然后再进入下一个级别，如下所示：

<div [formGroup]="form.controls.Something.controls.Organization">
 ...
   <div [formGroup]="form.controls.Something.controls.Organization.controls.Other">
    ...

试试看。如果不行（无法访问Something），也试试：

<div [formGroup]="form.get("Something").get("Organization")">

form.controls 将浏览您定义的确切路径，而form.get 将转到您指定的确切控件，使其适用于多层表单，便于维护和阅读。

让我们知道你得到了什么。