如何在 Angular 中使用多个组件初始化动态表单

Question

我想要一份包含员工轮班的表格。在 UI 中，我有一个表单来指定每天的班次，并且可以动态添加班次。

我希望我的班次组件负责创建单个班次 FormGroup。我正在努力初始化我的父表单，或者我不知道在哪个组件中初始化它。

Answer 1

您可以在父组件（即 Working day）上创建 shifts 表单数组，然后将各个数组控件作为 FormGroup 传递给子 shift 组件。

this.parentform = this.formBuilder.group({
      name: new FormControl(),
      shifts: new FormArray([]),
    });

---- Template ----
<app-shift [form]="parentform.get('shifts').controls[index]"></app-shift>

通过将 FormGroup 传递给子组件，您也可以在父组件上访问其值/验证器。

注意：正如您所提到的，班次将来自 API，您需要在响应中迭代班次数组并返回结果。使用 startDate/endDate 属性创建 FormGroup。

它的工作原理如下：

Shift component：将 FormGroup 作为输入。

@Input() form: FormGroup;

  get shiftForm() {
    return this.form as FormGroup;
  }

在父组件中，创建表单组&迭代 shift FormArray.controls。

Parent HTML：

  <div formArrayName="shifts">
    <ng-container *ngFor="let shiftForm of shiftsArray.controls; let i = index">
      <app-shift [form]="shiftForm"></app-shift>
    </ng-container>
  </div>

TS：单击按钮/接收 API 响应时，调用 addShift() 方法添加新的 FormGroup 在 shifts 控制中

  addShift() {
    const shiftForm = this.formBuilder.group({
      startDate: new FormControl(''),
      endDate: new FormControl(''),
    });
    this.shiftsArray.push(shiftForm);
  }

注意： Angular 的最新版本对类型转换非常严格。因此，您可能需要在传递给子级之前将每个 shiftForm 类型转换为父级中的 FormGroup。

这是一个有效的 stackblitz演示将 FormGroup 从父级传递给子级。