Компьютерапия

AngularJS - Формы

Категория: AngularJS
Просмотров: 3816

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(); });

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok



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

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok