问题描述
我有以下JSON响应。
从JSON响应中,我正在创建动态选项卡,并且在每个选项卡中,我要基于下面提到的条件推送formArray。
**在下面的响应中,
const myObj = [
{
'TabName': 'Test1',
'otherDetails': [
{
'processTechType': 'Continuous'
},
{
'processTechType': 'Batch',
},
]
},
{
'TabName': 'Test2',
'otherDetails': [
{
'processTechType': 'Batch'
}
]
}
];
for Ex-TabName Test1和TabName Test2是我动态显示的选项卡名。现在在Test1选项卡中,我想要按下Form数组连续和Form数组批处理这两个表单。因为在Test1选项卡中,我有一个包含Continue和Batch两个元素的ProcessTechType数组。因此它将在Test1选项卡中同时显示这两个窗体。
Ex-2--现在在Test2选项卡中,我只想推送Form阵列批处理表单。因为在Test2选项卡中,我在其他Detail对象中有了ProcessTechType批处理。因此它将仅在Test2选项卡中显示批次表单。
我的意思是,每次它都将检查响应中的Tabname和其他Details键,并仅在特定选项卡上显示基于ProcessTechType数组键的表单。
我有以下代码。但它在所有选项卡中都推送这两个表单,而不是在特定的选项卡上。对于我的代码中的ex-from,它在Test1和Test2两个选项卡中都显示了一次连续Form数组和两次批处理Form数组。
预期产量-
在Test1页签中,将推送一张连续表单和一批表单。
在测试2页签中,将仅显示推式批次表单。
有人能帮助我完成代码工作以获得预期的输出吗?
getMakeLineData() {
var otherDetails = myObj.filter(m => m.otherDetails).map(m => m.otherDetails);
this.makeLineData = myObj;
if (otherDetails) {
otherDetails.forEach(element => {
for (var i of element) {
if (i.processTechType === 'Continuous') {
this.addQuantity();
}
else if (i.processTechType === 'Batch') {
this.addBatch();
}
}
});
}
}
createContinuousForm() {
return this.fb.group({
designProcess: ['', [Validators.required]]
});
}
createBatchForm() {
return this.fb.group({
avgBCT: ['', [Validators.required]]
});
}
continuousType(): FormArray {
return this.dataCollectionForm.get("continuousType") as FormArray;
}
batchType(): FormArray {
return this.dataCollectionForm.get("batchType") as FormArray;
}
addQuantity() {
this.continuousType().push(this.createContinuousForm());
}
addBatch() {
this.batchType().push(this.createBatchForm());
}
HTML模板
<div class="tabGroupDiv row">
<div class="lossLinesDiv">
<mat-tab-group class="lossMatGrpCls" mat-align-tabs="left">
<mat-tab *ngFor="let lineData of makeLineData">
<ng-template mat-tab-label>
<button class="validatorTabBgClr">{{lineData.makeLineName}}</button>
</ng-template>
<form [formGroup]="dataCollectionForm" (ngSubmit)="onSubmit()">
<!-- <--continuous Form start here -->
<div class="admin-console-main-wrapper" formArrayName="continuousType">
<div class="content-wrapper" *ngFor="let lineItem of continuousType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Design Process Capacity (Tonnes)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Design Process Capacity"
formControlName="designProcess">
</mat-form-field>
<mat-error *ngIf="lineItem?.controls?.designProcess?.hasError('required')">
Field is required
</mat-error>
</div>
</div>
</div>
</div>
<!-- <--continuous Form start here -->
<!-- <--Batch Form start here -->
<div class="admin-console-main-wrapper" formArrayName="batchType">
<div class="content-wrapper" *ngFor="let lineBatchItem of batchType().controls; let i=index"
[formGroupName]="i">
<div class="row list-wrapper">
<div class="col-xs-3 col-md-3 deo-dv-list-wrapper">
<h5 class="topbar-items-text">Average BCT (mins)</h5>
<mat-form-field appearance="outline">
<input matInput type="text" class="line-fte-input smed-input" placeholder="Average BCT"
formControlName="avgBCT">
</mat-form-field>
</div>
</div>
</div>
</div>
<!-- <--Batch Form ends here -->
</form>
</mat-tab>
</mat-tab-group>
</div>
</div>
推荐答案
您的对象对于RelationalTab和FormArray来说很复杂,因此,假设您有一个更舒适的对象。有些像
[{tabName:'Tab 1',continuousType:0,batchType:0},
{tabName:'Tab 2',continuousType:1,batchType:-1}]
请注意,您使用";-1";来指示该选项卡没有此类型的表单
为此创建一个函数,该函数将返回这个更合适的数组
tabsConfig(obj:any){
const tab=[];
let continuousType=0;
let batchType=0;
obj.forEach((x,index)=>{
tab[index]={tabName:x.TabName,continuousType:-1,batchType:-1}
x.otherDetails.forEach(y=>{
if (y.processTechType=='Continuous')
tab[index].continuousType=continuousType++
if (y.processTechType=='Batch')
tab[index].batchType=batchType++
})
})
return tab
}
现在您可以使用变量来存储配置
this.tabs=this.tabConfig(this.myObj)
然后您可以
this.tabs.forEach(x=>{
if (x.continuousType!=-1)
this.continuousType.push(this.createContinuousForm())
if (x.batchType!=-1)
this.batchType.push(this.createBatchForm())
})
和,如果有两个辅助表单返回FormArray的FormGroup
getContinuousForm(index:number){
return (this.dataCollectionForm.get("continuousType") as FormArray)
.at(index) as FormGroup
}
getBatchForm(index:number){
return (this.dataCollectionForm.get("batchType") as FormArray)
.at(index) as FormGroup
}
您已经准备好创建在&q;选项卡和数组上迭代的mat-Tab
<mat-tab-group >
<mat-tab *ngFor="let tab of tabs;let i=index">
<ng-template mat-tab-label>
<button >{{tab.tabName}}</button>
</ng-template>
<form *ngIf="tab.continuousType!=-1
[formGroup]="getContinuousForm(tab.continuousType)">
....
</form>
<form *ngIf="tab.batchType!=-1
[formGroup]="getBatchForm(tab.batchType)">
....
</form>
</mat-tab>
</mat-tab-group>
这篇关于如何基于Angular8中的API生成动态数据页签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!