Meenal, ContractServiceList является массивом, поэтому вы должны использовать ArrayForm. Я предложил всегда делать функцию для возврата формы
export class TabGroupBasicExample implements OnInit {
addForm:FormGroup;
//this function make easier access to the Form array
get contractList() {
return this.addForm.get('contractServiceList') as FormArray;
}
constructor(private formBuilder:FormBuilder){}
//this function return a FormGroup empty or filled with the data
createForm(data:any):FormGroup
{
return this.formBuilder.group({
contractId: [data? data.contractId:'',Validators.required],
serviceName: [data? data.serviceName:''],
//to return the array we use a function that return an array of FormGroup
contractServiceList:this.formBuilder.array(
this.createContractService(data?data.contractServiceList:null)
)
});
}
//see that createContractService return an array of FormGroup
createContractService(data:any[]|null):FormGroup[]
{
//if receive a data array, for each item in array return
//a fromGroup with the value
return data?
data.map(x=>{
let group=this.formBuilder.group({
copayAmount: [x.copayAmount, Validators.required],
coInsurance: [x.coInsurance, Validators.required],
deductibleApplies: [x.deductibleApplies, Validators.required],
penaltyApplies: [x.penaltyApplies, Validators.required],
penaltyRule: [x.penaltyRule, Validators.required],
penaltyType: [x.penaltyType, Validators.required],
penaltyValue: [x.penaltyValue, Validators.required],
deductibleAppliesPenalty: [x.deductibleAppliesPenalty, Validators.required]
});
return group;
}):
[this.formBuilder.group(
{
copayAmount: ['', Validators.required],
coInsurance: ['', Validators.required],
deductibleApplies: ['', Validators.required],
penaltyApplies: ['', Validators.required],
penaltyRule: ['', Validators.required],
penaltyType: ['', Validators.required],
penaltyValue: ['', Validators.required],
deductibleAppliesPenalty: ['', Validators.required]
})]
}
ngOnInit()
{
this.addForm=this.createForm(null)
}
}
Обновление
Если у вас есть объект типа
let contrat={
"contractId": "2",
"serviceName": "qqqq",
"contractServiceList": [
{
"copayAmount": "12",
"coInsurance": "22553",
"deductibleApplies": "12",
"penaltyApplies": "",
"penaltyRule": "",
"penaltyType": "1",
"penaltyValue": "",
"deductibleAppliesPenalty": "2"
}
]
}
Вы можете сделать
this.addForm=this.createForm(contract)
И вы получите значения, готовые к обновлению.
Вы .html должны учитывать, что вы работаете с formArray
<code> <form *ngIf="addForm" [formGroup]="addForm" >
<!--or your fileds not in array-->
<input formControlName="contractId"/>
<input formControlName="serviceName">
<!--Your form Array name---->
<div formArrayName="contractServiceList">
<!--a div *ngFor over addForm.get('contractServiceList').controls
don't forget formGroupName="i"-->
<div *ngFor="let items of contractList.controls; let i=index"
[formGroupName]="i">
<!--al your controls of the array here-->
<input formControlName="copayAmount"/>
<input formControlName="coInsurance"/>
....
</div>
</div>
<!--just for check -->
<pre>{{addForm?.value |json}}
Ну, вы хотите сделать таблицу, изменить. HTML
Обновление 2
Если мы хотим проверить сам formArray, мы можем создать собственный валидатор. Ну, я люблю делать собственный валидатор как функцию в своем компоненте. Для пользовательских валидаторов, в более общем смысле - пользователь в нескольких компонентах - см. https://angular.io/guide/form-validation#custom-validators
Итак, мы можем добавить в component.ts
arrayValidator(){
return (control: FormArray) => {
console.log(control.value);
//using value, you return an object if error or null
return null;
}
}
И изменить при создании массива как
contractServiceList:this.formBuilder.array(
this.createContractService(data?data.contractServiceList:null),
this.arrayValidator()
)