我正在从服务中检索数据格式的数据。现在，如果我有n个数据的数组，我如何以嵌套的形式绑定数据？表格已经填写了这些数据，验证字段也会在其中应用。
这是我的父组件html代码。
<form [formGroup]="secondForm" (ngSubmit)="onSecondSubmit()" *ngIf="EnableSecond" [hidden]="!myForm.valid">
<div formArrayName="items">
<div *ngFor="let address of secondForm.get('items')['controls']; let i=index">
<div>
<label>Email Template - {{i + 1}}</label>
<span *ngIf="secondForm.controls.items.controls.length > 1" (click)="removeAddress(i)"> Remove
</span>
</div>
<editworkflow [groups]="secondForm.controls.items.controls[i]"></editworkflow>
</div>
</div>
<a (click)="addAddress()">
Create More Email Template
</a>
<div>
<div>
<button nbButton type="submit" [disabled]="!secondForm.valid">Confirm</button>
</div>
</div>
</form>
这是父组件打字稿文件。
ngOnint(){
this.usermodel.items = this.items /*my array of object which i am getting
from services*/
this.secondForm = this._fb.group({
items: this._fb.array([
this.initAddress(),
])
});
}
initAddress() {
return this._fb.group({
EmailType: [this.usermodel.items.name, Validators.required],
name: [this.usermodel.items.name, Validators.required],
subject: [this.usermodel.items.template.subject, Validators.required],
'from': [this.usermodel.items.template.from, [Validators.required, ValidationService.emailValidator]],
'body': [this.usermodel.items.template.body, [Validators.required]],
'active': [],
'confidential': [],
'numberOfDaysToWait': ['', Validators.required],
'sequentialOrder': ['', Validators.required]
});
}
addAddress() {
// add address to the list
const control = <FormArray>this.secondForm.controls['items'];
control.push(this.initAddress());
}
removeAddress(i: number) {
// remove address from the list
const control = <FormArray>this.secondForm.controls['items'];
control.removeAt(i);
}
我的对象数组看起来像这样。
"items": [
{
"template": {
"name": "Series 1 email",
"from": "TEAMGMG",
"subject": "GROUP2 - SERIES1 - EMAIL",
"body": "<html><body><strong>My test email</strong></body></html>",
"confidential": true,
"active": true
},
"sequentialOrder": 1,
"numberOfDaysToWait": 0,
"name": "Test email sequence 1",
"description": "Test email GROUP 2 sequence 1 - description"
}, {
"template": {
"name": "Series 2 email",
"from": "TEAMGMG",
"subject": "GROUP2 - SERIES2 - EMAIL",
"body": "<html><body><strong>My test email2</strong></body></html>",
"confidential": true,
"active": true
},
"sequentialOrder": 2,
"numberOfDaysToWait": 10,
"name": "Test email sequence 2",
"description": "Test email sequence 2 - description"
}
]
}]
您可以创建一个接收“数据”或null的函数并返回一个FormGroup
addAddress(data:any) {
//if received a null, create a data with the necesary properties
data=data||{template:{from:'',:'',name:'',subject:'',...},sequentialOrder:0,...}
return this._fb.group({
EmailType: [data.template.from, Validators.required],
name: [data.template.name, Validators.required],
subject: [data.template.subject, Validators.required],
'from': [data.template.from, [Validators.required, ValidationService.emailValidator]],
'body': [data.template.body, [Validators.required]],
'active': [data.template.active],
'confidential': [data.template.confidential],
'numberOfDaysToWait': [data.numberOfDaysToWait, Validators.required],
'sequentialOrder': [data.sequentialOrder, Validators.required]
});
}
因此，您可以使用a添加到数组中
control.push(this.addAddress(null));
//or
control.push(this.addAddress(data));
您可以在OneInit上使用
this.usermodel.items = this.items
this.secondForm = this._fb.group({
items: this._fb.array(items.map(data=>this.addAddress(data))
});
}
items.map，转换formGroup数组中的项数组