angular 2 supprime tous les éléments d'un formarray

Question

J'ai un tableau de formulaire à l'intérieur d'un formbuilder et je suis l'évolution dynamique des formes, c'est à dire sur cliquez sur charger des données à partir de l'application 1 etc.

La question que je vais avoir, c'est que tous les chargements de données, mais les données de la formarray reste et se concats les éléments anciens avec les nouveaux.

Comment puis-je clair que formarray d'avoir seulement les nouveaux éléments.

J'ai essayé ce

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

mais ça ne fonctionne pas.

Des idées? merci

dans 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 n'est pas appelé sur clic

Answer 1

J'ai eu le même problème. Il y a deux façons de résoudre ce problème.

Préserver abonnement

Vous pouvez effacer manuellement chaque FormArray élément en appelant l' removeAt(i) fonction dans une boucle.

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

L'avantage de cette approche est que tous les abonnements sur votre formArray, telle que celle enregistrée avec formArray.valueChanges, ne seront pas perdus.

Voir la FormArray la documentation pour plus d'informations.

---

Méthode plus propre (mais brise abonnement références)

Vous pouvez remplacer l'ensemble FormArray avec un nouveau.

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

Cette approche pose problème si vous êtes abonné à l' formArray.valueChanges observable! Si vous remplacez le FromArray avec un nouveau tableau, vous perdrez la référence à l'observable que vous êtes abonné.

Answer 2

Ou vous pouvez simplement effacer les contrôles

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

D'ajouter quelque chose, array

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

Effacer le tableau

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

Lorsque vous avez plusieurs choix et clair, parfois, il ne fait pas de mise à jour de la vue. Une solution de contournement consiste à ajouter

arr.removeAt(0)

Mise à JOUR

Une solution plus élégante pour l'utilisation des tableaux de forme est à l'aide d'une lecture en haut de votre classe et vous pouvez ensuite y accéder.

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

Et de l'utiliser dans un modèle

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

Réinitialiser:

inFormArray.reset();

Push:

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

Supprimer la valeur à l'index: 1

inFormArray.removeAt(1);

Answer 3

Avertissement!

L'angle de v6.1.7 FormArray documentation dit:

Pour modifier les contrôles dans le tableau, utilisez le poussoir, d'insérer ou de removeAt méthodes de FormArray lui-même. Ces méthodes s'assurer que les contrôles sont correctement suivies dans la forme de la hiérarchie. Ne pas modifier le tableau de AbstractControls utilisé pour instancier le FormArray directement, en tant que suite à d'étranges et inattendus tels que des fragments de changement la détection.

Gardez cela à l'esprit si vous êtes à l'aide de l' splice fonction directement sur l' controls tableau comme l'une des réponses proposées.

Utiliser l' removeAt fonction.

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

Answer 4

Angular v4.4 si vous avez besoin de sauvegarder la même référence à l’instance de FormArray, essayez ceci:

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

Answer 5

Fourni la structure de données pour ce que vous aurez à remplacer l'information dans le tableau à correspond à ce qui est déjà là, vous pouvez utiliser patchValue

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

patchValue(valeur: aucun[], {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void Patchs, la valeur de la FormArray. Il accepte un tableau qui correspond à la structure de contrôle, et faire de son mieux pour faire correspondre les valeurs à la bonne contrôles dans le groupe.

Il accepte à la fois les super-ensembles et sous-ensembles de la matrice, sans jeter un message d'erreur.

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

Sinon, vous pouvez utiliser reset

reset(valeur?: tout, {onlySelf, emitEvent}?: {onlySelf?: boolean, emitEvent?: boolean}) : void Réinitialise le FormArray. Cela signifie par par défaut:

Le tableau et tous les descendants sont marqués vierges de La matrice et de tous les les descendants sont marqués intacte La valeur de tous les descendants seront ou null null maps, Vous pouvez également réinitialiser à une forme spécifique de l'état par en passant dans un ensemble d'états qui correspond à la structure de la de contrôle. L'état peut être une valeur intrinsèque ou d'une forme d'état de l'objet avec à la fois une valeur et un état désactivé.

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

OU

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

Voici une fourche Plunker démo de certains travaux antérieurs de la mine de démo très simple d'utilisation de chacun.