如何解决在多列中显示formArray输入
我已经创建了一个formArray表,现在我试图在4列中仅显示4行,因为我有一个仅包含4个区域的数组,所以我使用嵌套循环将区域彼此,区域本身结合在一起O(n)^ 2的复杂度给了我16种组合,并且在初始化formarray时,所有输入字段都显示在第一列中,情况并非如此。我只需要在每列中显示4个即可。我正在使用Angular材质,那么我该如何实现呢?这是我的HTML代码
<div *ngIf="enableCombinationDirective">
<div fxLayout="row">
<div class="h1">Add Prices</div>
<div [formGroup]="combinationForm">
<div formArrayName="dest" *ngFor="let item of combinationForm.get('dest')['controls']; let i = index">
<div fxLayout="row" class="check" fxLayoutAlign="space-evenly">
<mat-form-field appearance="outline" [formGroupName]="i" style="width: 20% !important;" apprearance="outline" fxFlex="50">
<mat-label>{{
combinationForm
.get("dest")
["controls"][i].get("combinationTitle").value
}}</mat-label>
<input
matInput
type="number"
#destInput
formControlName="price"
placeholder="Enter Price"
/>
<mat-checkBox
formControlName="isActive"
matSuffix
></mat-checkBox>
</mat-form-field>
</div>
</div>
<div fxLayout="row">
<button
fxFlex="100"
mat-raised-button
color="primary"
(click)="save()"
>
Save Changes
</button>
</div>
</div>
</div>
</div>
该表单工作正常,我也能够从中获取数据。这是它的样子
这是我初始化它的方式
createCombinations() {
let arrayOfData = [];
arrayOfData.push({
volumeSlabType: this.combinationSelectionForm.value.volumeSlab,serviceType: this.combinationSelectionForm.value.serviceType,weightSlab: this.combinationSelectionForm.value.weightSlab,region: this.getRegionsCombinations(this.combinationSelectionForm.value.region)
});
this.data = arrayOfData;
this.data[0].region.forEach((reg,i) => {
const fArray = this.combinationForm.get("dest") as FormArray;
fArray.push(this.createForm(reg,i));
});
console.log(this.data);
}
createForm(dest: any,index): FormGroup {
let group: FormGroup;
if(this.data) {
group = this._fb.group({
combinationTitle: [dest.combinationTitle],regionId: [dest.regionId],price: [],isActive: [false],});
}
return group;
}
getFormData(data): FormGroup {
return data[0].region;
}
getRegionsCombinations(region) {
let selectedRegion: IRegion[] = this.regions.filter((data) => data.id === region);
let regionCombination = [];
this.regions.forEach((region) => {
this.regions.forEach((rData) => {
regionCombination.push({
combinationTitle: `${region.name} - ${rData.name}`,regionId: rData.id,price: 0
});
});
});
return regionCombination;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。