AngularJS обеспечивает богатое заполнение форм и проверки. Мы можем использовать NG-клик, чтобы обработать кнопку AngularJS нажимать событие, а затем использовать $ Dirty и $ неверные флаги для ее проверки. Используйте объявление формы Novalidate, чтобы запретить любую специфическую проверку браузера. Управление форм использует много угловых действий. Давайте сначала рассмотрим события.
событие
AngularJS обеспечивает несколько событий, которые могут быть связаны с управлением HTML. Например, NG-клик обычно ассоциируется с кнопкой. Ниже приведены события, поддерживаемые AngularJS.
ng-click
ng-dbl-click
Нг-Муседаун
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", необходимый> <input name = "lastName" type = "text" ng-model = "lastName" требуется> <name = "email" type = "email" ng-model = "email" reply> <button ng-click = "reset ()"> reset </button> <fcription> function> stocdatcope ng-click). $ scope.reset = function () {$ scope.firstname = "mahesh"; $ scope.lastname = "parashar"; $ scope.email = "[email protected]"; } $ scope.reset ();} </script>Проверьте данные
Можно использовать следующие ошибки отслеживания.
$ Dirty - условие было изменено.
$ неверный-статус этого значения недействителен.
$ ошибка- указывает на точную ошибку.
пример
В следующих примерах будут показаны все вышеперечисленные инструкции.
testangularjs.html
<html> <head> <Title> Angular JS Forms </title> <style> Таблица, TH, TD {Border: 1px Solid Grey; пограничный коллапс: коллапс; Padding: 5px;} Таблица Tr: nth-child (ODD) {фоновый цвет: #f2f2f2;} таблица Tr: nth-child (даже) {фоновый цвет: #ffffff;} </style> </head> <body> <h2> angularjs sample-nameform nefialidate> <table> <tr> <td> Введите имени: </td> <td> <input name = "firstname" type = "text" ng-model = "firstname" требуется> <span style = "color: red ng-show =" spenceform.firstnam ng-shew = "studentform.firstname. $ error.required"> требуется именем. && StudentForm.lastName. $ Invalid "> <span ng-show =" StudentForm.lastName. $ error.Required "> требуется фамилия. </span> </span> </td> </tr> <tr> <td> Электронная почта: </td> <td> <name =" email "type =" ng-model = "Email =" 100 "100" 100 ". ng-show = "studentform.email. $ dirty && studentform.email. $ неверный"> <span ng-shef = "studentForm.email. $ error.required"> требуется электронная почта. </span> <span ng-show = "studentForm.email. $ error.email"> Адрес электронной почты. </span> </span> </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> ng-click = "reset ()"> reset </button> </td> <td> <button ng-disablet = "studentForm.firstName. $ Dirty && StudentForm.firstName. $ Invalid || StudentForm.lastName. $ Dirtyform.lastName. $ vangilid StudentForm.email. $ Invalid "ng-click =" upport () "> отправить </button> </td> </tr> </table> </form> </div> <script> function studentController ($ scope) {$ scope.reset = function () {$ scope.firstname =" mahesh "; "[email protected]"; } $ scope.reset ();} </script> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </body> </html>Выход
Откройте TextAngularjs.html в веб -браузере. Результаты следующие.
Выше приведено сортировка знаний AngularJS. Мы будем продолжать добавлять соответствующие знания в будущем. Спасибо за поддержку этого сайта!