如何为 angular 10 中的重复字段集构造或构建表单？

Question

<div class="card">
  <div>
    <span>Level </span>
  </div>
  <ul>
    <li>
      <div *ngFor="let sensorType of sensorsEnum">
        <mat-form-field class="col-12">
          <mat-label>Select {{ sensorType.name }}</mat-label>
          <mat-select formControlName="?">
            <mat-form-field appearance="outline" class="w-100">
              <input matInput #sensorTemperatureFilter />
            </mat-form-field>
            <mat-option *ngFor="
                      let sensor of sensors
                        | filter: sensorTemperatureFilter.value
                    " [value]="sensor.id">
              {{ sensor.id }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </li>
  </ul>
</div>


export enum SensorsEnum {
  Temperature = "temperature",
  Humidity = "humidity",
  PH = "ph",
  EC = "ec",
  N = "N",
  P = "P",
  K = "K",
}

我正在使用上面的枚举来循环。上面的 html 片段产生一个级别。我需要并排放置 3 个级别。

级别代表土壤的深度，对于每个级别，应选择不同的传感器。有 30、15、10、5 四个级别。每个级别都有相同的字段集。现在我想在单击创建时一次性验证所有这些级别。如何构建 formGroup？提前致谢

Here this is a box with horizontal scroll with four different levels.

Answer 1

您可以创建一个方法，returns 一个包含匹配字段集的表单组。然后您可以定义一个包含通过此方法构建的四个子组的父组。

注意：我使用的是在构造函数中作为 private fb:FormBuilder 导入的表单生成器。

public parentGroup = this.fb.group({
  level30: this.createGroup(data.level30),
  level15: this.createGroup(data.level15),
  level10: this.createGroup(data.level10),
  level5: this.createGroup(data.level5)
});

public createGroup = (data) => this.fb.group({
  tempurature: this.fb.control(data.tempurature.value),
  humidity: this.fb.control(data.humidity.value),
  ph: this.fb.control(data.ph.value),
  N: this.fb.control(data.N.value),
  P: this.fb.control(data.P.value),
  K: this.fb.control(data.K.value)
});

我在猜测您的数据结构方面有很大的自由度。无论如何，您现在将父表单组名称放在包装 DOM 中，并对所有子控件使用 formGroupName 和 formControlName。

只要DOM控制结构匹配上面的表单组结构，就可以get/validate整个表单的数据使用：

console.log(this.parentGroup.value);
/*
{
  level30: {
    tempurature: 15,
    humidity: 30,
    ph: 6.5,
    //...
  },
  level15: {
    //...
  },
  level10: {
    //...
  },
  level5: {
    //...
  }
}
*/

如何为 angular 10 中的重复字段集构造或构建表单？

How to structure or build form for the repetitive set of fields in angular 10?

javascript

angular

typescript

angular-reactive-forms

angular10