AngularJS обогащает заполнение и проверку формы. Мы можем использовать ng-click для обработки кнопки AngularJS и использовать $dirty и $invalid флаги, чтобы делать проверки без видимых причин. Используйте novalidate с объявлением формы, чтобы отключить любую проверку браузера. Элементы управления формами сильно используют Угловые события. Давайте сначала рассмотрим события.

События

AngularJS предоставляет несколько событий, которые могут быть связаны с элементами управления HTML. Например, ng-click обычно ассоциируется с кнопкой. Ниже приведены поддерживаемые события в Angular JS.

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

ng-click

Сбросьте данные формы, используя указатель кнопки на клике.

<input name = "firstname" type = "text" ng-model = "firstName" required>
<input name = "lastname" type = "text" ng-model = "lastName" required>
<input name = "email" type = "email" ng-model = "email" required>
<button ng-click = "reset()">Reset</button>
 
<script>
   function studentController($scope) {
      $scope.reset = function(){
         $scope.firstName = "Ivan";
         $scope.lastName = "Ivanov";
         $scope.email = "Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.";
      }  
     
      $scope.reset();
   }
</script>

Проверка данных

Следующее может использоваться для отслеживания ошибок.

  • $Dirty - указывает, что значение было изменено.
  • $Invalid - указывает, что введенное значение недействительно.
  • $Error - указывает точную ошибку.

Внимание!!!

Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!

Opera

Свободу АНГУЛЯРУ в Opera!!! )))

Google Chrome

Свободу АНГУЛЯРУ в Google Chrome!!! )))

Mozilla Firefox

Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))

Yandex

Свободу АНГУЛЯРУ в Yandex!!! )))

Пример

В следующем примере будут показаны все вышеупомянутые директивы.

<html>
   <head>
      <title>Angular JS Forms</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     
      <style>
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         }
        
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         }
        
         table tr:nth-child(even) {
            background-color: #ffffff;
         }
      </style>
     
   </head>
   <body>
     
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
        
         <form name = "studentForm" novalidate>
            <table border = "0">
               <tr>
                  <td>Enter first name:</td>
                  <td><input name = "firstname" type = "text" ng-model = "firstName" required>
                     <span style = "color:red" ng-show = "studentForm.firstname.$dirty && studentForm.firstname.$invalid">
                        <span ng-show = "studentForm.firstname.$error.required">First Name is required.</span>
                     </span>
                  </td>
               </tr>
              
               <tr>
                  <td>Enter last name: </td>
                  <td><input name = "lastname"  type = "text" ng-model = "lastName" required>
                     <span style = "color:red" ng-show = "studentForm.lastname.$dirty && studentForm.lastname.$invalid">
                        <span ng-show = "studentForm.lastname.$error.required">Last Name is required.</span>
                     </span>
                  </td>
               </tr>
              
               <tr>
                  <td>Email: </td><td><input name = "email" type = "email" ng-model = "email" length = "100" required>
                     <span style = "color:red" ng-show = "studentForm.email.$dirty && studentForm.email.$invalid">
                        <span ng-show = "studentForm.email.$error.required">Email is required.</span>
                        <span ng-show = "studentForm.email.$error.email">Invalid email address.</span>
                     </span>
                  </td>
               </tr>
              
               <tr>
                  <td>
                     <button ng-click = "reset()">Reset</button>
                  </td>
                  <td>
                     <button ng-disabled = "studentForm.firstname.$dirty &&
                        studentForm.firstname.$invalid || studentForm.lastname.$dirty &&
                        studentForm.lastname.$invalid || studentForm.email.$dirty &&
                        studentForm.email.$invalid" ng-click="submit()">Submit</button>
                  </td>
               </tr>
                                                            
            </table>
         </form>
      </div>
      
      <script>
         var mainApp = angular.module("mainApp", []);
        
         mainApp.controller('studentController', function($scope) {
            $scope.reset = function(){
               $scope.firstName = "Ivan";
               $scope.lastName = "Ivanov";
               $scope.email = "Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.";
            }
           
            $scope.reset();
         });
      </script>
     
   </body>
</html>
 
Angular JS Forms

AngularJS Sample Application

Enter first name: First Name is required.
Enter last name: Last Name is required.
Email: Email is required. Invalid email address.
"; } $scope.reset(); });
Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!




Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
Ok