Java >> Java tutorial >  >> Java

AngularJS Form Validering med ngMessages

Java

Næsten alle webapplikationer har formularer til modtagelse af data fra brugeren. Det giver brugerne mulighed for at indtaste, og dataene vil blive behandlet i backend. I AngularJS bliver formularerne  synkroniseret med dens model med to-vejs databinding i angularjs gennem ngModel direktiv. Lad os se, hvordan AngularJS kan gavne os, når vi arbejder med formularer, især under validering og forskellige tilstande af formularerne.

AngularJS Form Validation Eksempel

Lad os tage et simpelt login-eksempel og se, hvordan vi kan tilføje validering til det.

 <!DOCTYPE html>
<html>
<head>
  <meta charset="ISO-8859-1">
  <title>AngularJS Form Validation Example</title>
  <script
   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
  </script>
</head>
<body ng-app="myApp">
  <div ng-controller="LoginCtrl">
  <script type="text/javascript">
    angular.module('myApp', []).controller('LoginCtrl',
    function($scope) 
    {
      $scope.login = function(username,password) 
      {
        if(username == 'Java' && password == 'InterviewPoint')
        {
          alert("Correct User"); 
        } 
        else
        {
          alert("Invalid User"); 
        }
    };
  });
 </script>
   <form name="loginform">
     <label>UserName :</label> 
     <input type="text" ng-model="username"
       placeholder="Enter your User Name" required ng-minlength="5" /></br>
     </br> <label>Password :</label> 
     <input type="text" ng-model="password"
       placeholder="Enter your Password" required /></br>
     </br>
     <button ng-click="login(username,password)"
       ng-disabled="loginform.$invalid">Login</button>
   </form>
 </div>
</body>
</html>

Hvordan fungerer tingene her?

  1. vi har tilføjet en simpel formular, som vi har givet navnet som "loginform"
  2. Tilføjet HTML5-valideringstag "påkrævet" til hvert inputfelt for at gøre det obligatorisk
  3. Vi har tilføjet en validator ng-minlength , som håndhæver den mindste længde af værdien i inputfeltet for brugernavnet er på 5 tegn
  4. Til indsend-knappen har vi tilføjet direktivet ng-deaktiveret . Dette deaktiverer indsend-knappen, når betingelsen er opfyldt. I vores tilfælde vil vi "Login"-knappen blive deaktiveret, når formularen "loginform" er $invalid.

Output:

Hit på URL'en:http://localhost:8080/AngularJS_Tutorial/LoginForm.html

Du kunne se, at "Login" knappen vil blive deaktiveret, indtil formularvalideringerne er ryddet. (dvs.) et gyldigt brugernavn indtastes, da det er et obligatorisk felt, og længden skal være større end 5 tegn og adgangskode er indtastet, da det også er et obligatorisk felt.

Formattilstand i AngularJS

AngularJS har nedenstående 5 formulartilstande

Formulartilstand Beskrivelse
$invalid AngularJS indstiller denne tilstand, når nogen af ​​valideringerne som
requried, ng-minlength, ng-maxlength osv. på nogen af ​​felterne på formularen er ugyldig
$valid Dette er omvendt af $invalid tilstand, denne tilstand er indstillet, når al validering
i formularen er evaluering, der skal rettes
$pristine Alle formularer i angularjs starter med denne tilstand, denne tilstand fortæller os de felter, som
ikke er ændret af brugeren
$dirty $dirty er omvendt af $pristine , fortæller det, at brugeren har ændret
formularelementet
$error Denne tilstand indeholder alle fejl på hvert formularelement

Alle de ovennævnte tilstande undtagen $error er boolske og kan bruges som betingelse til at vise, skjule, deaktivere eller aktiver ethvert formelement.

Viser fejlmeddelelse

Ved at bruge validatorerne kan vi selvfølgelig aktivere eller deaktiver Send knappen, men det tjener ikke formålet. Vi er nødt til at fortælle brugeren, hvad der gik galt, og hvad der skal rettes.

<!DOCTYPE html>
<html>
<head>
  <meta charset="ISO-8859-1">
  <title>AngularJS Form Validation Example</title>
  <script
   src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js">
  </script>
</head>
<body ng-app="myApp">
  <div ng-controller="LoginCtrl">
  <script type="text/javascript">
    angular.module('myApp', []).controller('LoginCtrl',
    function($scope) 
    {
      $scope.login = function(username,password) 
      {
        if(username == 'Java' && password == 'InterviewPoint')
        {
          alert("Correct User"); 
        } 
        else
        {
          alert("Invalid User"); 
        }
    };
  });
 </script>
   <form name="loginform">
     <label>UserName :</label> 
     <input type="text" name="uname" ng-model="username"
       placeholder="Enter your User Name" required ng-minlength="5" /></br>
 
     <span style="color:red" ng-show="loginform.uname.$error.required">Username has to be 
entered</span>
     <span style="color:red"ng-show="loginform.uname.$error.minlength">Username has to be 
minimum 5 Character length</span>
 
     </br> <label>Password :</label> 
     <input type="text" name="pwd" ng-model="password"
      placeholder="Enter your Password" required /></br>
 
     <span style="color:red" ng-show="loginform.pwd.$error.required">Password has to entered</span>
     </br>
     <button ng-click="login(username,password)"
       ng-disabled="loginform.$invalid">Login</button>
   </form>
 </div>
</body>
</html>

Hvad er ændringerne?

  1. Først har vi tilføjet navneattributten til inputfelterne, “uname” for brugernavn tekstboks og "pwd" for adgangskode tekstboks. Når vi tilføjer et navn til et input, opretter det en model på formularen for det pågældende input med fejltilstanden.
  2. Så nu kan vi få adgang til de fejl, der opstod i brugernavnsfeltet ved at bruge “loginform.uname.$error.required”  når brugernavnet ikke er indtastet og “loginform.uname.$error.minlength” når minimumslængdekriterierne ikke er opfyldt. Tilsvarende for feltet Adgangskode “loginform.pwd.$error.required”  når adgangskoden ikke indtastes.

AngularJS-formularvalidering med ngMessages

I ovenstående kode har vi tilføjetng-showet direktiv til hvert af felterne for at vise fejlmeddelelsen. Før udgivelsen af ​​ngMessages udviklere er nødt til at stole på ng-showet direktiv for at vise fejlmeddelelsen. ngBeskeder er samlet i AngularJS 1.3-udgivelsen, ngMessages  tilføjet forbedret understøttelse af visning af meddelelser til brugeren, især fejlmeddelelser under formularvalidering.

<!DOCTYPE html>
<html>
<head>
  <meta charset="ISO-8859-1">
  <title>AngularJS Form Validation Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="LoginCtrl">
  <script type="text/javascript">
    angular.module('myApp', ['ngMessages']).controller('LoginCtrl',function($scope) 
    {
      $scope.login = function(username,password) 
      {
         if(username == 'Java' && password == 'InterviewPoint')
         {
            alert("Correct User"); 
         } 
         else
         {
            alert("Invalid User"); 
         }
     };
   });
 </script>
 <form name="loginform">
   <label>UserName :</label> 
   <input type="text" name="uname" ng-model="username"
      placeholder="Enter your User Name" required ng-minlength="5" /></br>

   <div ng-messages="loginform.uname.$error">
     <div style="color:red" ng-message="required">Username has to be entered..</div>
     <div style="color:red" ng-message="minlength">Username has to be minimum 5 Character length..</div>
   </div> 
 
   </br> <label>Password :</label> 
   <input type="text" name="pwd" ng-model="password"
      placeholder="Enter your Password" required /></br>
 
   <div ng-messages="loginform.pwd.$error">
     <div style="color:red" ng-message="required">Password has to be entered..</div>
   </div> 
   </br>
   <button ng-click="login(username,password)"
      ng-disabled="loginform.$invalid">Login</button>
   </form>
 </div>
</body>
</html>

Hvad er ændringerne?

  1. ngBeskeder vil blive bundtet i en separat js "angular-messages.js" vi har inkluderet det som et første skridt.
  2. For at bruge ngMessages modul skal vi inkludere det som vores modulafhængighed, som vi har tilføjet i vores angular.module
  3. Det er alle ngBeskeder vil håndtere at vise og skjule specifikke meddelelser baseret på fejlene. Grundlæggende ngMessages går gennem formularfelternes fejl, loginform.uname.$error  for vores brugernavn og loginform.pwd.$error  for vores adgangskodefelt.
  4. inputtype "navn" felt kan grundlæggende kun have 3 valideringer påkrævet, minlength, maxlength og dem blev nævnt i ng-meddelelsen attribut med den tilsvarende valideringsmeddelelse.

Output:


Java tag