Comment ajouter et supprimer dynamiquement des champs de formulaire dans Angulaire 2

C'est quelques mois de retard, mais j'ai pensé que je voudrais vous donner ma solution basée sur ce tutoriel ici. L'essentiel, c'est que c'est beaucoup plus facile à gérer, une fois que vous changez la façon dont vous vous approchez de formes.

Tout d'abord, utilisez ReactiveFormsModule au lieu de ou en plus de la normale FormsModule. Avec des formes réactives de vous créer vos formulaires dans vos composants/services, puis branchez-le dans votre page au lieu de votre page de génération de la forme elle-même. C'est un peu plus de code, mais c'est beaucoup plus testable, beaucoup plus souple, et aussi loin que je peux dire que le meilleur moyen de faire beaucoup de non-trivial formes.

Le résultat final ressemble un peu à ce, sur le plan conceptuel:

• Vous avez une base de FormGroup avec tout ce FormControl cas vous avez besoin pour l'ensemble de la forme. Par exemple, comme dans le tutoriel, je l'ai lié à la, permet de dire que vous voulez un formulaire où l'utilisateur peut entrer son nom une fois et ensuite n'importe quel nombre d'adresses. Tous d'un champ d'entrée serait dans ce formulaire de base du groupe.

• À l'intérieur que FormGroup exemple, il y aura un ou plusieurs FormArray instances. Un FormArray est essentiellement un moyen de regrouper plusieurs commandes en et itérer sur eux. Vous pouvez aussi mettre plusieurs FormGroup des instances de votre tableau et de les utiliser comme essentiellement "mini-formes" imbriquée à l'intérieur de votre plus grande forme.

• Par l'imbrication de plusieurs FormGroup et/ou FormControl occurrences au sein d'une dynamique FormArray, vous pouvez contrôler la validité et de gérer la forme comme une grande, réactif pièce composée de plusieurs parties dynamiques. Par exemple, si vous voulez vérifier si chaque entrée est valide avant de permettre à l'utilisateur de soumettre la validité d'un sous-formulaire "bubble up" pour le formulaire de premier niveau et la forme entière devient invalide, le rendant facile à gérer les entrées dynamiques.

• Comme un FormArray est, essentiellement, un wrapper autour d'un tableau de l'interface, mais pour former des morceaux, vous pouvez push, pop, insérer et supprimer des contrôles à tout moment sans avoir à recréer le formulaire ou en faisant des interactions complexes.

Dans le cas où le tutoriel je lien va vers le bas, voici quelques exemples de code que vous pouvez appliquer vous-même (mes exemples d'utilisation de la Machine) qui illustrent les idées de base:

Composant de Base code:

import { Component, Input, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'my-form-component',
templateUrl: './my-form.component.html'
})
export class MyFormComponent implements OnInit {
@Input() inputArray: ArrayType[];
myForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
let newForm = this.fb.group({
appearsOnce: ['InitialValue', [Validators.required, Validators.maxLength(25)]],
formArray: this.fb.array([])
});
const arrayControl = <FormArray>newForm.controls['formArray'];
this.inputArray.forEach(item => {
let newGroup = this.fb.group({
itemPropertyOne: ['InitialValue', [Validators.required]],
itemPropertyTwo: ['InitialValue', [Validators.minLength(5), Validators.maxLength(20)]]
});
arrayControl.push(newGroup);
});
this.myForm = newForm;
}
addInput(): void {
const arrayControl = <FormArray>this.myForm.controls['formArray'];
let newGroup = this.fb.group({
/* Fill this in identically to the one in ngOnInit */
});
arrayControl.push(newGroup);
}
delInput(index: number): void {
const arrayControl = <FormArray>this.myForm.controls['formArray'];
arrayControl.removeAt(index);
}
onSubmit(): void {
console.log(this.myForm.value);
//Your form value is outputted as a JavaScript object.
//Parse it as JSON or take the values necessary to use as you like
}
}

Sous-Composante de Code: (une pour chaque nouveau champ de saisie, pour garder les choses propres)

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'my-form-sub-component',
templateUrl: './my-form-sub-component.html'
})
export class MyFormSubComponent {
@Input() myForm: FormGroup; //This component is passed a FormGroup from the base component template
}

Composant de Base HTML

<form [formGroup]="myForm" (ngSubmit)="onSubmit()" novalidate>
<label>Appears Once:</label>
<input type="text" formControlName="appearsOnce" />
<div formArrayName="formArray">
<div *ngFor="let control of myForm.controls['formArray'].controls; let i = index">
<button type="button" (click)="delInput(i)">Delete</button>
<my-form-sub-component [myForm]="myForm.controls.formArray.controls[i]"></my-form-sub-component>
</div>
</div>
<button type="button" (click)="addInput()">Add</button>
<button type="submit" [disabled]="!myForm.valid">Save</button>
</form>

Sous-Composant HTML

<div [formGroup]="form">
<label>Property One: </label>
<input type="text" formControlName="propertyOne"/>
<label >Property Two: </label>
<input type="number" formControlName="propertyTwo"/>
</div>

Dans le code ci-dessus en gros, j'ai un composant qui représente la base de la forme, puis chaque sous-composant gère son propre FormGroup instance au sein de l' FormArray situé à l'intérieur de la base FormGroup. Le modèle de base, qui parcourt le sous-groupe chargé de la sous-composante et puis vous pouvez gérer la validation de la totalité du formulaire dynamiquement.

Aussi, il est trivial de re-composante de l'ordre par stratégiquement l'insertion et le retrait de la forme. Il fonctionne avec (presque) n'importe quel nombre d'entrées qu'ils n'entrent pas en conflit avec des noms (un gros inconvénient du modèle axé sur les formes autant que je suis au courant) et vous conservez toujours assez bien de validation automatique. Le seul "inconvénient" de cette approche est d'ailleurs écrit un peu plus de code, vous ne avoir à réapprendre les formes de travail. Toutefois, cela ouvre des possibilités beaucoup plus grandes et des formes plus dynamiques que vous allez sur.

Si vous avez des questions ou souhaitez signaler quelques erreurs, aller de l'avant. J'ai juste tapé le code ci-dessus de quelque chose que j'ai fait moi-même la semaine dernière avec les noms ont été changés et d'autres divers. propriétés de gauche, mais il devrait être très simple. La seule différence majeure entre le code ci-dessus, et de mes propres c'est que j'ai passé tous de la forme-construction d'un service séparé, qui est appelé à partir du composant c'est donc un peu moins salissant.