0
165
VisualizaçõesNot able to update the formArray fields
I am using reactive forms in which, in my UI I have radioButtons which when I select , shows the details about the selected value in the form. After selecting the button, the form patches Value from the backend.
My form is:
this.cForm = this.fb.group({
name: new FormControl('', Validators.required),
sId: new FormControl('', Validators.required),
eId: new FormControl('', Validators.required),
cond: this.fb.array([this.createConditions()], Validators.required)
});
createConditions() : FormGroup {
return this.fb.group({
dO : new FormControl(1),
field: new FormControl('', Validators.required),
cType: new FormControl('', Validators.required),
value: new FormControl('', Validators.required),
oType : 'AND'
});
}
addCondition() {
(<FormArray>this.cForm.get('cond')).push(this.createConditions());
}
get conditions() : FormArray {
return this.cForm.get('cond') as FormArray
}
deleteCondition(index :number) {
// this.conditions.removeAt(index);
const condArray = <FormArray>this.cForm.get('cond');
condArray.removeAt(index);
condArray.markAsDirty();
condArray.markAsTouched();
}
//This is called when I select the radio button.
editCat(event: any) {
if(event.cond.length == 1){
this.cForm.patchValue({
name: event['name'],
sId : event['sId'],
eId : event['eId'],
cond : event['cond']
})
}else {
this.cForm.patchValue({
name: event['name'],
sId : event['sId'],
eId : event['eId'],
});
this.cForm.setControl('cond', this.setExistingCond(event.cond))
}
}
setExistingConditions(conditions: Conditions[]): FormArray {
this.conditionCounter = 0;
const formArray = new FormArray([]);
conditions.forEach( cond => {
formArray.push(this.fb.group({
dO : 1,
field: cond.field,
cType: cond.cType,
value: cond.value,
oType : 'AND'
}));
})
return formArray;
}
So when I select a radio button which has event.cond.length == 4 it operates correctly and the UI also updates with new FormArray with those fields, but then after if I select a radio button, which has the above values less than the previous one but greater than 1, then it doesn't update the UI,
it gives this error ->
There is no FormControl instance attached to form control element with path: 'conditions -> 2 -> conditionType'
conditions - refers to cond
conditionType - refers to cType
1 Respostas
Responde à pergunta0
should be
this.cForm.setValue('cond', this.setExistingCond(event.cond).value)
See that is:setValue and you forget the value (your function this.setExistingCond return a FormArray).
You can also make that your function setExistingCond return an Array or e.g. make a setValue on a unique element of the formArray
setValueObject(index,cond)
{
//see a you can use your "getter" this.conditions
//I imagine you pass as argument an object with properties
// dO,field,cType and value
this.conditions.at(index).setValue({
dO : cond.dO,
field: cond.field,
cType: cond.cType,
value: cond.value,
oType : 'AND'
}
)
}
or
setValueObject(index,cond)
{
//see a you can use your "getter" this.conditions
//I imagine you pass as argument an object with properties
// dO,field,cType,value and oType
this.conditions.at(index).setValue(cond)
}