navigationend - angular 2 remueve todos los items de un formray

title angular 6

Question

Tengo una matriz de formularios dentro de un formbuilder y estoy cambiando dinámicamente los formularios, es decir, al hacer clic en cargar datos desde la aplicación 1, etc.

El problema que tengo es que todos los datos se cargan, pero los datos de la formación se mantienen y solo acumulan los elementos antiguos con nuevos.

¿Cómo puedo aclarar que formarray solo tiene los nuevos elementos?

He intentado esto

const control2 = <FormArray>this.registerForm.controls[''other_Partners''];
control2.setValue([]);

pero no funciona

¿Algunas ideas? Gracias

en nginit

ngOnInit(): void {
this.route.params.subscribe(params => { alert(params[''id'']);
if (params[''id'']) {
this.id = Number.parseInt(params[''id'']);
}
else { this.id = null;}
});
if (this.id != null && this.id != NaN) {
alert(this.id);
this.editApplication();
this.getApplication(this.id);
}
else
{
this.newApplication();
}
}
onSelect(Editedapplication: Application) {
this.router.navigate([''/apply'', Editedapplication.id]);
}
editApplication() {
this.registerForm = this.formBuilder.group({
id: null,
type_of_proposal: ['''', Validators.required],
title: ['''', [Validators.required, Validators.minLength(5)]],
lead_teaching_fellow: ['''', [Validators.required, Validators.minLength(5)]],
description: ['''', [Validators.required, Validators.minLength(5)]],
status: '''',
userID: JSON.parse(localStorage.getItem(''currentUser'')).username,
contactEmail: JSON.parse(localStorage.getItem(''currentUser'')).email,
forename: JSON.parse(localStorage.getItem(''currentUser'')).firstname,
surname: JSON.parse(localStorage.getItem(''currentUser'')).surname,
line_manager_discussion: true,
document_url: '''',
keywords: ['''', [Validators.required, Validators.minLength(5)]],
financial_Details: this.formBuilder.group({
id: null,
buying_expertise_description: ['''', [Validators.required, Validators.minLength(2)]],
buying_expertise_cost: ['''', [Validators.required]],
buying_out_teaching_fellow_cost: ['''', [Validators.required]],
buying_out_teaching_fellow_desc: ['''', [Validators.required, Validators.minLength(2)]],
travel_desc: ['''', [Validators.required, Validators.minLength(2)]],
travel_cost: ['''', [Validators.required]],
conference_details_desc: ['''', [Validators.required, Validators.minLength(2)]],
conference_details_cost: ['''', [Validators.required]],
}),
partners: this.formBuilder.array
(
[
//this.initEditPartner(),
//this.initEditPartner()
// this.initMultiplePartners(1)
]
),
other_Partners: this.formBuilder.array([
//this.initEditOther_Partners(),
])
});
}
getApplication(id)
{
this.applicationService.getAppById(id, JSON.parse(localStorage.getItem(''currentUser'')).username)
.subscribe(Response => {
if (Response.json() == false) {
this.router.navigateByUrl(''/'');
}
else {
this.application = Response.json();
for (var i = 0; i < this.application.partners.length;i++)
{
this.addPartner();
}
for (var i = 0; i < this.application.other_Partners.length; i++) {
this.addOther_Partner();
}
this.getDisabledStatus(Response.json().status);
(<FormGroup>this.registerForm)
.setValue(Response.json(), { onlySelf: true });
}
}
);
}

ngonitit no se llama en clic

Answer 1

¡Advertencia!

La documentación de FormArray de Angular v6.1.7 dice:

Para cambiar los controles en la matriz, use los métodos push, insert, o removeAt en FormArray. Estos métodos garantizan que los controles se rastreen correctamente en la jerarquía del formulario. No modifique la matriz de AbstractControls que se utiliza para crear una instancia de FormArray directamente, ya que se producen comportamientos extraños e inesperados, como la detección de cambios rotos.

Tenga esto en cuenta si está utilizando la función de splice directamente en la matriz de controls como una de las respuestas sugeridas.

Utilice la función removeAt .

 while (formArray.length !== 0) {
formArray.removeAt(0)
}

Answer 2

Angular v4.4 si necesita guardar la misma referencia en la instancia de FormArray, intente esto:

purgeForm(form: FormArray) {
while (0 !== form.length) {
form.removeAt(0);
}
}

Answer 3

O simplemente puede borrar los controles

this.myForm= {
name: new FormControl(""),
desc: new FormControl(""),
arr: new FormArray([])
}

Agregar algo array

const arr = <FormArray>this.myForm.controls.arr;
arr.push(new FormControl("X"));

Borrar la matriz

const arr = <FormArray>this.myForm.controls.arr;
arr.controls = [];

Cuando tiene múltiples opciones seleccionadas y claras, a veces no actualiza la vista. Una solución es agregar

arr.removeAt(0)

ACTUALIZAR

Una solución más elegante para usar arrays de formularios es usar un getter en la parte superior de su clase y luego puede acceder a él.

get inFormArray(): FormArray {
this.myForm.get(''inFormArray'') as FormArray;
}

Y usarlo en una plantilla.

<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i">
other tags...
</div>

Reiniciar:

inFormArray.reset();

Empujar:

inFormArray.push(new FormGroup({}));

Eliminar valor en el índice: 1

inFormArray.removeAt(1);

Answer 4

Parece que la forma más sencilla de hacerlo es usar el splice sin el parámetro de eliminación, por lo que elimina todos los elementos, luego todo está en una sola línea de código:

yourFormArray.controls.splice(0);

La referencia a la matriz de formularios no se pierde, por lo que sus suscripciones persistirán y no requiere un bucle.

Answer 5

Siempre que use la estructura de datos para lo que reemplazará la información en la matriz con lo que ya está allí, puede usar patchValue

https://angular.io/docs/ts/latest/api/forms/index/FormArray-class.html#!#reset-anchor

patchValue (value: any [], {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): void Revisa el valor de FormArray. 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.

Acepta los superconjuntos y los subgrupos de la matriz sin lanzar un error.

const arr = new FormArray([
new FormControl(),
new FormControl()
]);
console.log(arr.value); // [null, null]
arr.patchValue([''Nancy'']);
console.log(arr.value); // [''Nancy'', null]

Alternativamente puedes usar reset

reset (¿valor ?: cualquiera, {onlySelf, emitEvent} ?: {onlySelf ?: boolean, emitEvent ?: boolean}): void Restablece FormArray. Esto significa por defecto:

La matriz y todos los descendientes se marcan como prístinos La matriz y todos los descendientes se marcan como intactos El valor de todos los descendientes serán mapas nulos o nulos También puede restablecer un estado de formulario específico pasando una matriz de estados que coincida con la estructura del control . El estado puede ser un valor independiente o un objeto de estado de formulario con un valor y un estado desactivado.

this.arr.reset([''name'', ''last name'']);
console.log(this.arr.value); // [''name'', ''last name'']

O

this.arr.reset([ {value: ''name'', disabled: true}, ''last'' ]);
console.log(this.arr.value); // [''name'', ''last name'']
console.log(this.arr.get(0).status); // ''DISABLED''

Here''s una demostración de Plunker bifurcada de un trabajo mío anterior que demuestra una utilización muy simple de cada uno.

Answer 6

Tuve el mismo problema Hay dos formas de resolver este problema.

Suscribir suscripción

Puede borrar manualmente cada elemento de FormArray llamando a la función removeAt(i) en un bucle.

clearFormArray = (formArray: FormArray) => {
while (formArray.length !== 0) {
formArray.removeAt(0)
}
}

La ventaja de este enfoque es que no se perderán las suscripciones en su formArray , como la registrada con formArray.valueChanges .

Vea la documentación de FormArray para más información.

Método más limpio (pero rompe las referencias de suscripción)

Puede reemplazar todo FormArray con uno nuevo.

clearFormArray = (formArray: FormArray) => {
formArray = this.formBuilder.array([]);
}

Este enfoque causa un problema si está suscrito a formArray.valueChanges observable! Si reemplaza FromArray con una nueva matriz, perderá la referencia al observable al que está suscrito.