Question

我正在实现一个动态表单，可以通过“添加”按钮创建该表单。这种动态形式也是一个组件，我们称为子组件。

父组件看起来像这样：

<div *ngFor="let station of stationFormData.controls; let stationFormIndex = index"
         class="list-group list-group-flush">
      <div [formGroup]="station">
          <app-charge-station-modification-contact [contacts]="stations[stationFormIndex]?.contact"[form]="station"></app-charge-station-modification-contact>
 </div>
<button mat-icon-button matTooltip="Add New Station" (click)="addNewStation()">
      <mat-icon class="add-button-enabled-color">add</mat-icon>
    </button>
          
</div>

此addNewStation功能如下：

public addNewStation(): void {
    console.log(this.stations);
    this.stationFormData.push(this.fb.group({
      contact: this.fb.array([this.fb.group({
        name: { value: '', disabled: false },
      })]),
      })]),
      
    }));
  }

所以此方法将创建一个称为contact的新表单。

此联系人是子组件。

看起来像这样：

<div fxLayout="row" class="parameterWrapper">
  <div class="parameterLabel">contact</div>
    <div *ngFor="let contactForm of contactFormData.controls; let contactFormIndex = index"
       class="list-group list-group-flush">
    <div [formGroup]="contactForm">
      <div fxLayout="row" class="parameterWrapper">
        <div class="parameterLabelStep">name</div>
        <label>
          <input class="parameterInput" type="text" formControlName="name"
                 [disabled]="contactForm.controls.name.disabled"
                 [value]="contactForm.controls.name">
        </label>
      </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的问题是，我不知道如何实现由子组件生成的动态表单。

我尝试过几次，但是总是出错。

任何解决方案？

如何使用子组件生成动态表单

0 个答案: