如何將表單組系結到Angular中嵌套的動態創建的組件

在我的 Angular 12 應用程式中，我有這種型別的層次結構：

- app.component
-- Parent component with form (reactive)
--- Component that creates the dynamic components
---- Dynamic component

我的 formBuilder 表單如下所示：

    form = this.fb.group({
        baseLevelControl: ["base control"],
        groupOfGroups: [this.fb.group({
            innerGroup1: this.fb.group({
                dummy1Control1: "control 1 from inner group 1",
                dummy1Control2: "control 2 from inner group 1",
            }),
            innerGroup2: this.fb.group({
                dummy2Control1: "control 1 from inner group 2",
                dummy2Control2: "control 2 from inner group 2",
            }),
        })]
    });

我的動態組件只需要知道 groupOfGroups 而不是整個表單，因為它將在許多地方使用不同型別的表單。

當我在動態組件中設定時

<div [formGroup]="innerForm">

我得到一個單獨的獨立表單，它不與父表單通信。如果我使用

<div formGroupName="innerForm">

我得到錯誤 formGroupName must be used with a parent formGroup directive

如何正確系結 groupOfGroups？

我創建了這個 stackblitz 專案來模擬這個問題，任何幫助將不勝感激

uj5u.com熱心網友回復：

您可以注入ControlContainer子組件以訪問父組件表單組。

• https://stackblitz.com/edit/angular-ivy-slgmo9

在您的子dynamic1.component.ts組件中，注入 ControlContainer 并將父表單組分配給子組件的FormGroup屬性。這將使您可以FormGroup從父組件訪問父組件。

@Component({
  selector: 'app-dynamic1',
  templateUrl: './dynamic1.component.html',
  styleUrls: ['./dynamic1.component.scss'],
})
export class Dynamic1Component implements OnInit {
  public formGroup: FormGroup;

  constructor(private _parentContainer: ControlContainer) {}

  ngOnInit(): void {
    this.formGroup = this._parentContainer.control as FormGroup;
  }
}

更新您dynamic1.component.html以使用此表單組。

<div *ngIf="formGroup" [formGroup]="formGroup">
  <div formGroupName="innerGroup1">
    <p>dummy controls for group 1</p>
    <input formControlName="dummy1Control1" />
    <input formControlName="dummy1Control2" />
  </div>
  <div formGroupName="innerGroup2">
    <p>dummy controls for group 2</p>
    <input formControlName="dummy2Control1" />
    <input formControlName="dummy2Control2" />
  </div>
</div>

在您level1.component.ts更新 FormGroup 中。你最初有groupOfGroups一個陣列。這不是必需的，您只需為此分配一個 FormGroup 即可。

@Component({
  selector: 'app-level1',
  templateUrl: './level1.component.html',
  styleUrls: ['./level1.component.scss'],
})
export class Level1Component implements OnInit {
  form = this.fb.group({
    baseLevelControl: ['base control'],
    groupOfGroups: this.fb.group({
      innerGroup1: this.fb.group({
        dummy1Control1: 'control 1 from inner group 1',
        dummy1Control2: 'control 2 from inner group 1',
      }),
      innerGroup2: this.fb.group({
        dummy2Control1: 'control 1 from inner group 2',
        dummy2Control2: 'control 2 from inner group 2',
      }),
    }),
  });

  // OTHER STUFF....

}

你的level1.component.html模板看起來像......

<h1>Level 1</h1>
<div [formGroup]="form">
  <label for="baseControl">Base Control Value:</label>
  <input name="baseControl" formControlName="baseLevelControl" type="text" />
  <div formGroupName="groupOfGroups">
    <h3>Dynamic 2</h3>
    <app-dynamic1></app-dynamic1>
  </div>
  <div>
    <button type="button" (click)="onSubmit()">Submit</button>
  </div>
</div>

• https://jenniferwadella.com/blog/angular-control-container

標籤：有角的 角反应形式 角度动态组件

上一篇：patchValue錯誤上的AngularPrimeNGp-calendar反應形式位置2處的意外文字

下一篇：當源發出時管道可觀察不發出