如何结构或构建表单的重复设置在角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。每个级别都有相同的字段集。现在我想在点击create时一次性验证所有这些关卡。如何构建formGroup?提前感谢

这是一个有四个不同级别的水平滚动框。

Answer 1

您可以创建一个方法，该方法返回包含匹配字段集的表单组。然后，您可以定义一个父组，其中包含从此方法构建的四个子组。

注意:我使用的是在构造函数中作为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控件结构与上面的表单组结构匹配，就可以使用以下命令从整个表单获取/验证数据:

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