Angular 8 + Kendo UI – Validation de formulaire réactif
Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular
Vous souhaitez en savoir plus sur la création d'excellentes applications Web angulaires? Tout commence avec Kendo UI for Angular – une bibliothèque de composants d'interface utilisateur complète qui vous permet de créer rapidement des applications réactives de haute qualité. Il comprend tout ce dont vous avez besoin, des grilles et graphiques aux listes déroulantes et jauges.
L'équipe de Kendo UI for Angular s'engage à vous fournir les derniers conseils et astuces dans le monde du développement angulaire. Nous espérons que vous apprécierez le post!
Dans ce tutoriel, découvrez comment créer facilement un formulaire d’enregistrement avec validation de formulaire réactif avec Angular 8 et Kendo UI pour Angular.
Remarque: Cet exemple a été construit avec . ] Angular 8.1.0
Voici un exemple rapide de configuration de la validation de formulaire dans Angular 8 avec des composants Kendo UI et des formulaires réactifs. L'exemple est un simple formulaire d'inscription avec de jolis champs standard pour le titre, le prénom, le nom de famille, l'adresse de messagerie, le mot de passe, le mot de passe de confirmation et un contrôle d'acceptation du commutateur Ts & Cs. Tous les champs sont obligatoires, y compris le contrôle du commutateur. Le champ email doit être une adresse email valide et le mot de passe doit avoir une longueur minimale de 6 caractères. Il existe également un validateur personnalisé appelé MustMatch
utilisé pour valider la correspondance des champs de mot de passe et de confirmation du mot de passe.
J'ai configuré les messages de validation de formulaire à afficher lorsque l'utilisateur tente de soumettre le formulaire. . Cette opération est implémentée avec une propriété soumise
dans le composant d'application défini sur true
lors de la soumission du formulaire et réinitialisée sur false
en cas de clic sur le bouton d'annulation. .
Les composants suivants de l’interface utilisateur Kendo sont utilisés sous la forme:
kendo-dropdownlist
est utilisé pour le champ TitrekendoTextBox
est utilisé pour les champs Prénom, Nom et Email [19659013] kendoTextBox avectype = "password"
est utilisé pour les champs Mot de passe et Confirmer le mot de passeLe commutateur kendo
est utilisé pour le champ Accepter les commandes. KendoButton
est utilisé pour les boutons Enregistrer et Annuler
Pour plus d'informations sur tous les composants disponibles dans l'interface utilisateur de Kendo pour Angular, voir la documentation et les démonstrations de ici .
Le style de l'exemple est terminé avec Bootstrap 4.3, l’interface utilisateur de Kendo pour Angular Default Theme et quelques styles CSS personnalisés dans le menu principal [1945] 9017] index.html fichier. Pour plus d'informations sur le style des composants de Kendo UI pour Angular, voir cet aperçu du style .
Le voici maintenant en action:
(Voir sur StackBlitz sur https://stackblitz.com/edit/angular-8-kendo-ui-reactive-form-validation )
Composant d'application Angular + Kendo UI
Le composant d'application définit les champs de formulaire et validateurs de notre formulaire d’enregistrement en utilisant un FormBuilder
angulaire pour créer une instance d’un FormGroup
qui est stocké dans la propriété registerForm
. Le registerForm
est ensuite lié au formulaire dans le modèle d'application ci-dessous à l'aide de la directive [formGroup]
.
Le tableau titres
est lié au kendo-dropdownlist
. ] dans le modèle de composant d'application avec la propriété [data] = "Titres"
.
J'ai également ajouté un getter f
comme propriété de commodité pour faciliter l'accès aux contrôles de formulaire à partir du modèle. . Ainsi, par exemple, vous pouvez accéder au champ confirmPassword du modèle en utilisant f.confirmPassword
au lieu de . RegisterForm.controls.confirmPassword
.
import {. Component ] OnInit } de '@ angular / core' ;
import { FormBuilder . , Validateurs } de '@ angular / forms' ;
import { MustMatch } de '. ./_helpers/must-match.validator'[19659031unset;
@ Composant ( { sélecteur : 'app' templateUrl : 'app.component.html' [19659028]} )
classe d'exportation AppComponent implémente OnInit {
registerForm : FormGroup ;
soumis = false ;
titres = [ 'Mr' 'Mrs' 'Miss' 'Ms' ] [19659031];
constructeur ( privé formBuilder : FormBuilder ) { }
ngOnInit ) {
this . registerForm = this . deBuilder . Groupe [
titre : [ '' Validators . requis ]
prenom : [ '' Validateurs . requis ]
lastName : [ '' Validators . requis ]
email : [ '' [ Validators . required Validators . email ] ]
mot de passe : [ '[ [ Validators . required Validators . minLength ( 6 ) ] ]
confirmPassword : [ '[ Validators . requis ]
acceptTerms : [ false Validators . requiredTrue ]
} {
validator : MustMatch ( 'mot de passe' 'confirmPassword' )
} ) ;
} ; 19659132] get f () { renvoyez ce . registerForm . contrôle ; . }
onSubmit () {
ceci . soumis = vrai ;
si ([19659069] ce . registerForm . invalide ) {
return ;
}
alerte ( 'SUCCESS !!: -) n n' + JSON . stringify ( cette . registerForm . ] valeur null 4 ) ) ;
}
sur Reeset () .
ce . submi tted = false ;
ceci . registerForm . reset () [
]
] [1965931]. 19659187]}
Modèle de composant d'application angulaire + Kendo UI
Le modèle de composant d'application contient toute la syntaxe du balisage HTML et du modèle angulaire permettant d'afficher l'exemple de formulaire d'enregistrement dans votre navigateur. L'élément de formulaire utilise la directive [formGroup]
pour se lier au registerForm
FormGroup dans le composant d'application ci-dessus.
Le formulaire lie l'événement de soumission de formulaire au gestionnaire onSubmit ()
. le composant d'application utilisant la liaison d'événement angulaire (ngSubmit) = "onSubmit ()"
. Les messages de validation ne sont affichés que lorsque l'utilisateur tente de soumettre le formulaire pour la première fois. ceci est contrôlé avec la propriété soumise
du composant d'application.
L'événement de clic du bouton d'annulation est lié au gestionnaire onReset ()
du composant d'application utilisant la liaison d'événement angulaire (click) = "onReset ()"
.
< div class = " de la carte m-3 " [ [19659031]>
< h5 class = " fiche-tête " > Angulaire 8 + Kendo UI - Réactif Validation du formulaire </ h5 >
< div class = " du corps de carte " ]>
< form [formGroup] = " registerForm " (ngSubmit) = "" onSubmit () " >
< div class = " rangée de forme " >
< div class = " groupe de formes col " >
< label > Titre </ label >
< kendo-dropdownlist formControlName = " titre " [data] = "" titres " classe = " contrôle de forme " [ngClass] = " ". { ' ng-invalid ng-touched ' : soumis && f.title.errors} " >
</ Liste des kendo-drop-down >
< div * ngIf = " soumis && f.title.errors " classe = " k-tooltip-validation " >
< div * ngIf = " f.title.errors.required " > Un titre est requis . ] </ div >
</ div >
</ div >
< div class = " groupe de formes col-5 " >
< label > Prénom </ label >
< entrée kendoTextBox formControlName = " prénom " classe = ". form-control " [ngClass] = " { ' ng-invalid ng-touched ' : soumis && f.firstName.errors} " />
< div * ngIf = " soumis && f.NomProfil.errors " classe = " k-tooltip-validation " >
< div * ngIf = " f.firstName.errors.required " > Le premier nom est obligatoire [19659204] </ div >
</ div >
</ div >
< div class = " groupe de formes col-5 " >
< label > Nom de famille </ label >
< input kendoTextBox formControlName = " nom " classe = ". form-control " [ngClass] = " { ' ng-invalid ng-touched ' : soumis && f.lastName.errors} " />
< div * ngIf = " soumis && f.lastName.errors " classe = " k-tooltip-validation " >
< div * ngIf = " f.lastName.errors.required " > Le dernier nom est requis [19659204] </ div >
</ div >
</ div >
</ div >
< div class = " groupe de formes " >
< label > Email </ label >
< input kendoTextBox formControlName = " email " classe = ". form-control " [ngClass] = " { ' ng-invalid ng-touched ' : soumis && f.email.errors} " />
< div * ngIf = " soumis && f.email.errors " classe = " k-tooltip-validation " >
< div * ngIf = " f.email.errors.required " > Un courrier électronique est nécessaire [19659204] </ div >
< div * ngIf = " f.email.errors.email " > L'email doit obligatoirement être valide adresse électronique </ div >
</ div >
</ div >
< div class = " rangée de forme " >
< div class = " groupe de formes col " >
< label > Mot de passe </ label >
< input kendoTextBox type = " mot de passe " formControlName =
mot de passe "
class = " contrôle de forme " [ngClass] = " "" { ' ng-invalid ng-touched ' : soumis && f.password.errors} " />
< div * ngIf = " soumis && f.password.errors " classe = " k-tooltip-validation " >
< div * ngIf = " f.password.errors.required " > Le mot de passe est requis . ] </ div >
< div * ngIf = " f.password.errors.minlength " > Le mot de passe doit être au minimum 6 caractères </ div >
</ div >
</ div >
< div class = " groupe de formes col " >
< label > Confirmer le mot de passe </ label >
< input kendoTextBox type = " mot de passe " formControlName =
confirmPassword "
class = " contrôle de forme " " "" " { ' ng-invalid ng-touched ' : soumis && f.confirmPassword.errors} "
/>
< div * ngIf = " a été soumis par && f.confirmPassword.errors " classe = ". k-tooltip-validation " >
< div * ngIf = " f.confirmPassword.errors.required " > Confirmer le mot de passe est requis [19659204] </ div >
< div * ngIf = " f.confirmPassword.errors.mustMatch " > Des mots de passe identiques à ceux de . ] </ div >
</ div >
</ div >
</ div >
< div class = " groupe de formes " >
< commutateur de kendo formControlName = " accepte les conditions de vente " surLabel = " Oui "
offLabel = " Non " > </ kendo-switch >
< label > Accepter les conditions générales </ label >
< div * ngIf = " soumis && f.acceptTerms.errors " classe = " k-tooltip-validation " > Accepter les conditions de transaction requises </ div >
</ div >
< div class = " centre de texte " >
< button kendoButton primaire = " true " classe = " mr-2 " > Inscrivez-vous </ bouton >
< button kendoButton type = " reset " (cliquez) = " onReset () " > Annuler </ bouton >
</ div >
</ forme >
</ div >
</ div >
Validateur personnalisé «à faire correspondre» avec les formulaires réactifs
Le validateur personnalisé MustMatch
est utilisé dans cet exemple pour vérifier que les deux champs de mot de passe ( password
et confirm
) match. Il peut également être utilisé pour vérifier la correspondance des paires de champs (par exemple, les champs de courrier électronique et de confirmation).
Il fonctionne légèrement différemment d'un validateur personnalisé classique, car je règle l'erreur sur le deuxième champ au lieu de le renvoyer. être mis sur le formGroup. Je l’ai fait de cette façon parce que je pense que cela rend le modèle un peu plus propre et plus intuitif. L'erreur de validation mustMatch
est affichée sous le champ confirmPassword. Il est donc logique que l'erreur soit associée au contrôle de formulaire confirmPassword.
import { FormGroup } de '@ angular / forms' ;
export fonction MustMatch ( contrôleNom : chaîne de caractères matchingControlName : string ) {
return ( de la catégorie ). = => . ] {
const control = du groupe . contrôles du [name] ;
const = de groupe . contrôles [ matchingControlName ] ;
si ( matchingControl . . ]les erreurs && ! matchingControl . erreurs . mustMatch ) {
retour ;
] [19659149] if ( control . valeur ! == matchingControl . valeur ) {
matchingControl . setErrors ( { mustMatch : true } ) ;
} autre [19659028] {
matchingControl . setErrors ( null ) ;
}
}
Module d'application angulaire + Kendo UI
là Le module de l'application ne contient pas grand chose, à part le standard. La principale chose à retenir pour utiliser des formes réactives dans Angular est d'importer le ReactiveFormsModule de '@ angular / forms'
et de l'inclure dans le tableau des importations du décorateur @NgModule
.
Pour utiliser les composants de Kendo UI pour Angular, importez les modules contenant les composants que vous souhaitez utiliser et incluez-les dans le tableau imports du décorateur @NgModule
. L'exemple utilise des composants de Kendo UI de InputsModule
DropDownsModule
et ButtonsModule
.
import { NgModule . ] de '@ angular / core' ;
import { BrowserModule } de '@ angular / platform-browser' ;
import { ReactiveFormsModule } de '@ angular / forms' ;
import { BrowserAnimationsModule }. 19659029] de '@ angular / platform-browser / animations' ;
import { InputsModule } de '@ progress / kendo-angular -inputs ';
import { DropDownsModule } de à partir de ' @ progress / kendo-angular-dropdowns ';
import [19659028] { ButtonsModule } de [19659030] '@ progress / kendo-angular-buttons' ;
import { AppComponent } de './ app.component' ;
@ NgModule ( {
importations : [
NavigateurModule
Formulaire de formulaire réactif
NavigateurAnimationsModule
InputsModule
DropDownsModule
BoutonsModule
]
déclarations : [
AppComponent
]
bootstrap : [ AppComponent ]
}
classe d'export de classe AppModule { }
Source link