Anglar6 tutorial

é
Angular
© Gérald Abbadie 2018
import { NgForm } from '@angular/forms/src/directives/ng_form';
import { AuthService } from '../services/auth-imc.service';
export class ConnexionImcComponent implements OnInit {
donneesID = {login:'', mdp:''};
constructor(public authService:AuthService,) { }
ngOnInit() {}
gereFormulaire(f:ngForm){
console.log(f);
}
}
Dans ce composant, la fonction gereFormulaire() reçoit et affiche les valeurs du formulaire.
Digression vers les styles
Les systèmes de gestion des champs de formulaire permettent très simplement de modifier
leur apparence. Lors des interactions avec un formulaire vous pourrez observer que les styles
CSS sont ajoutés ou enlevés dynamiquement à la volée en fonction des interactions. Vous
pourrez voir apparaître dans le code des pristine, touched, dirty au fil des clics. Ainsi, des styles
CSS peuvent être ajoutés à votre application pour générer des effets visuels automatiques. Par
exemple :
input.ng-invalid {
border: 3px red solid;
}
Un champ invalide sera bordé de rouge.
input.ng-invalid.ng-dirty {
border: 3px yellow solid;
}
Le champ devient jaune lorsque le champ est invalide mais que des données ont été saisies.
input.ng-valid.ng-dirty {
border: 3px green solid;
}
Enfin, si les données sont valides, le champ devient automatiquement vert.
Gérer des validations et des erreurs
Les validations
Quelques validateurs sont fournis par le framework et nous aident à identifier l’état du formu-
52