Anglar6 tutorial

é
Angular
© Gérald Abbadie 2018
Les formulaires orientés composants
Cette manière de gérer les formulaires permet de créer des formulaires plus dynamiques et
plus évolutifs mais plus verbeux.
Les méthodes FormControl et FormGroup gèrent leur création. Elles sont membres de la
classe FormBuilder :
import { FormBuilder } from '@angular/forms';
constructor(private formBuild:FormBuilder){}
A partir de cette base, nous pouvons recréer un formulaire :
export class FormComponent {
connexionForm: FormGroup;
constructor(formBuilder: FormBuilder) {
this.connexionForm = formBuilder.group({
id: formBuilder.control(''),
mdp: formBuilder.control('')
});
}
connexion() {
console.log(this.connexionForm.value);
}
}
Avec un formulaire géré au niveau du template nous utilisons la classe NgForm. Ici nous utiliserons
ReactiveFormsModule. La directive formGroup nous permettra de relier notre formulaire
au composant et formControlName de relier les champs :
S'identifier
Identifiant
Mot de passe
Se connecter
Le HTML est assez simple :
»»
formControlName : donne un identifiant pour le code afin d'appliquer les traitements ;
»»
ngSubmit : déclenche la méthode connexion.
Nous pouvons aller un tout petit peu plus loin dans un formulaire. Voici un exemple complet
54