navigationend - angular 2 remueve todos los items de un formray
title angular 6 (6)
¡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)
}
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
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);
}
}
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);
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.
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.
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 conformArray.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.valueChangesobservable! Si reemplaza FromArray con una nueva matriz, perderá la referencia al observable al que está suscrito.