settitle - change title tag angular

Angular 4 patchValue basado en el índice en FormArray

Question

Estoy buscando actualizar un formArray después de que el usuario agregue un valor en un control creado vacío.

Actualmente, cuando el usuario selecciona agregar un nuevo elemento, construyo en formArray con valores vacíos.

buildItem(item?: any, key?: any): FormGroup {
// Item will pass undefined for initial buildItem in onLoad and new items
let itemName: string;
let keyValue: string;
if (item === undefined) {
itemName = ''''; key = '''' }
else {
itemName = item.name; keyValue = key
};
/**
* Builds a single item for form group array in the collectionForm.
*/
return this.formBuilder.group({
item: [itemName || '''', Validators.required],
properties: { item, key: key } || {} });
}

Esto funciona bien para la creación inicial y la actualización de los elementos que ya se han agregado. El problema es con los nuevos elementos que se agregan con valores vacíos. Cuando agrego un nuevo elemento, necesito agregar la clave de retorno de firebase en properties.key

En el método para guardar ese nuevo elemento, agregué un valor de patchValue

this.items.patchValue([{
// item being returned from firebase promise
item: item.name,
properties: { item: item.name, key: item.$key'' }
}]);

Sin embargo, el valor de patchValue no funciona en absoluto. Cuando trato de actualizar ese nuevo valor, aunque los valores se han guardado en base de fuego, todavía obtengo un retorno de los valores como vacío o los valores de guardado establecidos en el BuildItem() inicial y no los valores actualizados en el patchValue

Veo en la documentación angular de FormArray que

Acepta una matriz que coincide con la estructura del control y hará todo lo posible para hacer coincidir los valores con los controles correctos del grupo . REF

¿Significa eso que podría y no actualizar ese valor ... solo hará lo posible por intentarlo? Me imagino que si puedo agregar el índice para el valor que quiero parchear, entonces no debería ser un problema en absoluto. como con el removeAt(idx)

Así que si puedo escribir algo como

this.form.patchValue.atIndex(this.idx,[{
item: item.name,
properties: { item: item.name, key: item.$key'' }
}];

Pero no estoy seguro de que pueda hacer eso ... bueno, bastante seguro de que no es posible en esa forma. ¿Hay alguna forma de apuntar específicamente al elemento que se ha formArray en un formArray o no estoy entendiendo esto correctamente?

Puedo formArray la formArray presionando el nuevo valor en el formArray

this.items.push(this.buildItem(...));

Sin embargo, entonces tengo que añadir

this.items.removeAt(this.idx);

Con el fin de eliminar el control inicial en la construcción vacía, que no parece ningún tipo de código bueno.

Answer 1

Puede hacer esto simplemente creando un nuevo Control de control si desea actualizar la estructura de la matriz de agujeros:

this.form.setControl(''items'', new FormControl(arrayItemsValue));

O eliminando todos los elementos antes de actualizarlos:

const items = (<FormArray>this.form.get(''items''));
for (let i = 0; i < items.length; i++) {
items.removeAt(i);
}
this.form.get(''items'').setValue(arrayItemsValue);

Answer 2

Use FormArray#at + AbstractControl#patchValue :

this.items.at(index).patchValue(...);