0
167
ViewsNo se pueden actualizar los campos de formArray
Estoy usando formularios reactivos en los que, en mi interfaz de usuario, tengo botones de radio que, cuando selecciono, muestran los detalles sobre el valor seleccionado en el formulario. Después de seleccionar el botón, el formulario parchea Value desde el backend. mi formulario es:
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(); }// Esto se llama cuando selecciono el botón de opción.
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; } Entonces, cuando selecciono un botón de opción que tiene event.cond.length == 4 , funciona correctamente y la interfaz de usuario también se actualiza con el nuevo FormArray con esos campos, pero luego, si selecciono un botón de opción, que tiene los valores anteriores menos que el anterior pero mayor que 1, entonces no actualiza la interfaz de usuario,
da este error -> There is no FormControl instance attached to form control element with path: 'conditions -> 2 -> conditionType'
condiciones - se refiere a cond
conditionType - se refiere a cType
1 answers
Answer question0
debiera ser
this.cForm.setValue('cond', this.setExistingCond(event.cond).value) Vea que es: setValue y olvida el value (su función this.setExistingCond devuelve un FormArray).
También puede hacer que su función setExistingCond devuelva un Array o, por ejemplo, haga un setValue en un elemento único de 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' } ) }o
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) }