获取错误：找不到带有路径的控件：'excludedPeriods -> 0 -> dateTo'

Question

我正在尝试在FormArray中使用FormGroup 。 我的 HTML 看起来像这样：

<div nz-row nzGutter="10" formArrayName="excludedPeriods">
            <ng-container *ngFor="let period of excludedPeriodsList().controls; let i = index">

              <div [formGroupName]="i">
                <div nz-row nzGutter="10">
                  <div nz-col nzSpan>
                    <nz-form-item>
                      <nz-form-label nzSpan="24">Exclude From</nz-form-label>
                      <nz-form-control>
                        <nz-date-picker nzShowTime nzFormat="dd/MM/yyyy HH:mm" formControlName="dateFrom"
                          [style.width]="'100%'"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                  <div nz-col nzSpan>
                    <nz-form-item>
                      <nz-form-label nzSpan="24">Exclude To</nz-form-label>
                      <nz-form-control>
                        <nz-date-picker nzShowTime nzFormat="dd/MM/yyyy HH:mm" formControlName="dateTo"
                          [style.width]="'100%'"></nz-date-picker>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </div>
            </ng-container>
          </div>

TypeScript 内部：

为了初始化表单，我通过服务调用检查表单是否已经包含任何值，并将该值传递给createForm function：

private _createForm(product?: IProduct): void {
    console.log('_createForm ~ product', product.excludedPeriods);
    this.segmentIds = product?.segmentIds ?? [];
    const excludedPeriods = product?.excludedPeriods ?? [];
    this.productForm = this.fb.group({
      activeFrom: [product?.activeFrom],
      activeTo: [product?.activeTo],
      excludedPeriods: this.fb.array(excludedPeriods),
    });
}

excludedPeriodsList(): FormArray {
    return this.productForm.get('excludedPeriods') as FormArray;
}

newExcludePeriod(): FormGroup {
    return this.fb.group({
      dateFrom: '',
      dateTo: ''
    });
}

addExcludedPeriod() {
    this.excludedPeriodsList().push(this.newExcludePeriod());
}

我无法弄清楚我在这里做错了什么。 有人可以启发我并给我一个解决方案吗？

Answer 1

您必须将excludedPeriods值作为FormGoup[]提供给表单数组。

解决方案 1：使用.map()

this.productForm = this.fb.group({
  ...,
  excludedPeriods: this.fb.array(
    excludedPeriods.map(
      (x) =>
        this.fb.group({
          dateFrom: [x.dateFrom],
          dateTo: [x.dateTo],
        })
    )
  ),
});

---

解决方案 2：使用FormArray.push()

private _createForm(product?: IProduct): void {
  ...

  this.productForm = this.fb.group({
    ...,
    excludedPeriods: this.fb.array([]),
  });

  this.addFormGroupToExcludePeriodsList(excludedPeriods);
}

addFormGroupToExcludePeriodsList(
  excludedPeriods: { dateFrom: Date; dateTo: Date }[]
) {
  for (let excludePeriod of excludedPeriods) {
    this.excludedPeriodsList().push(
      this.fb.group({
        dateFrom: [excludePeriod.dateFrom],
        dateTo: [excludePeriod.dateTo],
      })
    );
  }
}

演示解决方案 1 和 2 @ StackBlitz