Fermer

août 21, 2019

Angular 8 + Kendo UI – Validation de formulaire réactif


Parrainé par l'interface utilisateur de Kendo pour l'équipe Angular


 KUI_Angular_670x150

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 Titre
  • kendoTextBox est utilisé pour les champs Prénom, Nom et Email [19659013] kendoTextBox avec type = "password" est utilisé pour les champs Mot de passe et Confirmer le mot de passe
  • Le 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