Элементы управления (вход, Select, Textarea) - это способ ввести данные. Форма представляет собой набор этих элементов управления с целью группировки соответствующих элементов управления.
Формы и элементы управления предоставляют услуги проверки, поэтому пользователи могут получать подсказки для неверного ввода. Это обеспечивает лучший пользовательский опыт, так как пользователи могут немедленно получить обратную связь и знать, как исправить ошибку. Помните, что, хотя проверка клиента играет важную роль в обеспечении хорошего пользовательского опыта, ее можно просто обойти, поэтому проверка клиента является ненадежным. Проверка на стороне сервера все еще необходима для безопасного приложения.
1. Простая форма
Ключевой директивой на понимание двустороннего связывания данных является NGModel. NGModel обеспечивает двунаправленное привязку данных из модели для просмотра и просмотра к модели. И это также обеспечивает API другим директивам для улучшения их поведения.
<! Doctype html> <html lang = "zh-cn" ng-app = "simpleform"> <head> <meta charset = "utf-8"> <title> Propertyevaluation </title> <style type = "text/css"> .ng-cloak {display: none; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate> name: <input ng-model = "user.name" type = "text"> <br/> электронная почта: <input ng-model = "user.email" type = "email"> <br/> gender: <input value = "male" ng-model = "digder". type = "radio"> male <input value = "ng-model =" user.gender "type =" radio "> wem <br/> <button ng-click =" reset () "> восстановить последнее сохранение </button> <кнопка ng-click =" update (пользователь) "> Сохранить </button> </form> <pre> form = {{{{{{{{user | json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("simpleform", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.cope (user);}; $ scope.reset = function () {$ scope = angular.cope ($ scope. $ scope.reset ();2. Использование классов CSS
Чтобы сделать форму, элементы управления и нгмодель, богатую стилем, можно добавить следующий класс:
В следующем примере используйте CSS для отображения достоверности каждого элемента управления формой. В примере, user.name и user.email требуются, но когда они изменены (грязные), фон появится красным. Это гарантирует, что пользователь не отвлекается от ошибки до тех пор, пока не будет взаимодействовать с формой (после подачи?) И обнаружив, что его достоверность не выполнена.
<! Doctype html> <html lang = "zh-cn" ng-app = "cssclasses"> <head> <meta charset = "utf-8"> <title> cssclasses </title> <style type = "text/css"> .ng-croak {displass: no; } .css-form input.ng-invalid.ng-dirty {фоновое цветное: #fa787e; } .css-form input.ng-valid.ng-dirty {фоновое цветное: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> имя: <input ng-model = "user.name" type = "text"> <br/> электронная почта: <input ng-model = "user.email" type = "Email"> <br/> gender: <input value = "user.email" type = "Email"> <br/> gender: <input value = "marail" marail ". ng-model = "user.gender" type = "radio"> male <input value = "ng-model =" user.gender "type =" radio "> wem <br/> <button ng-click =" Reset () "> Reset </button> <button ng-click =" update (user) "> save </button> </form> <pre> form = {{user | json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("cssclasses", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.cope (user);}; $ scope.reset = function () {$ scope = angular.cope ($ scope. $ scope.reset ();3. Связывание с формированием и управлением состоянием
В угловании форма является экземпляром FormController. Экземпляры формы могут быть подвергнуты применению по желанию, используя атрибут имени (я не понимаю его здесь, в сфере областей нет свойства, которое всегда было с атрибутом имени формы, но, поскольку существует метод, такой как «документ. Имя формы», его все еще можно получить). Точно так же управление является экземпляром NgmodelController. Управляющие экземпляры могут быть подвергнуты тому, что он будет аналогичным образом, используя атрибут имени. Это показывает, что внутренние свойства как формы, так и контроля возможны для связывания в представлениях с использованием стандартных примитивов связывания.
Это позволяет нам расширить приведенный выше пример, следующие функции:
<! Doctype html> <html lang = "zh-cn" ng-app = "controlState"> <Head> <meta charset = "utf-8"> <title> ControlState </title> <style type = "text/css"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {фоновое цветное: #fa787e; } .css-form input.ng-valid.ng-dirty {фоновое цветное: #78fa89; } </style> </head> <body> <div ng-controller = "myctrl"> <form novalidate name = "formname"> name: <input ng-model = "user.name" name = "username" type = "text" text> <br/> <div ng-show = "formname.username. $ formname. name </span> </div> Электронная почта: <input ng-model = "user.email" name = "user-usemail" type = "email" remeal> <br/> <div ng-shef = "formname.useremail. $ dirty && formname.useremail. $ Invalid"> tip: <pran ng-show = "formname.useremail. ng-shef = "formname.useremail. $ error.email"> Это не допустимая электронная почта </span> </div> Пол: <input value = "male" ng-model = "user.gender" type = "radio"> мужчина <input value = "ng-model =" user.gender "type ="> wome <br/input type = "chepbrobe" user.gender "type ="> wome <brbr/> <input = "ng-codel". name = "userAgree" обязательно/> я согласен: <input type = "text" ng-show = "user.agree" ng-model = "user.agreesign" обязательный/> <div ng-shef = "! formname.useragree ||! user.agreesign"> Пожалуйста, согласен и подпишите ~ </div> <Кнопка ng-click = "recest ()" ng-disabled = "isunchanged (user)"> сбросить </button> <button ng-click = "update (user)" ng-disablet = "formname. $ Invalid || isunchanged (user)"> Сохранить </button> </form> <pre> form = {{user | json}} </pre> <pre> saved = {{saved | json}} </pre> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("controlState", []); app.controller ("myctrl", function ($ scope, $ window) {$ scope.saved = {}; $ scope.update = function (user) {$ scope.saved = angular.cope (user);}; $ scope. = function (user) {return angular.equals (user, $ scope.saved);4. Пользовательская проверка
Angular обеспечивает реализации для большинства публичных полей форм HTML (ввод, текст, номер, URL, электронная почта, радио, флажок), а также есть директивы (требуемый, шаблон, инлу, максимальная длина, мин, макс) для проверки формы.
Мы можем определить наш собственный плагин для проверки, определив директиву в контроллере NGModel (это соединен NGModelController вместе?). Чтобы получить контроллер, директива указывает зависимости, как в следующем примере (директива определяет атрибут «Восстания» в объекте).
Модель для просмотра обновления - всякий раз, когда модель меняется, все функции в NgmodelController. $ Formatters (запускание проверки данных и преобразование форматирования при изменении модели) будет быть в очереди на выполнение, поэтому каждая функция здесь имеет шанс форматировать значение модели и изменить статус версии управления. (http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngmodel.ngmodelcontroller#$SetVality).
View to Model Update - аналогичный путь, независимо от того, когда пользователь взаимодействует с элементом управления, NgmodelController. $ SetViewValue будет запускается. В настоящее время приведен поворот для выполнения анализаторов ngmodelcontroller $ (когда элемент управления получает значение от DOM, будут выполнены все методы в этом массиве, значения будут рассмотрены, отфильтрованы или преобразованы, а также проверены).
В следующем примере мы создадим две директивы.
Первым является целое число, которое отвечает за проверку того, является ли вход действительным целым числом. Например, 1.23 является незаконным значением, поскольку он содержит дробную часть. Обратите внимание, что мы используем Unshift для замены нажимания хвоста, вставив его в головку массива, потому что мы хотим, чтобы он сначала выполнил, и использовал значение этого элемента управления (оценивая, что массив используется в качестве очереди), нам необходимо выполнить функцию проверки, прежде чем произойдет преобразование.
Вторая директива-умный флоат. Он преобразует «1,2» и «1,2» в законное число с плавающей запятой «1.2». Обратите внимание, что мы не можем использовать здесь тип входа HTML5 «номер», потому что браузер не позволяет пользователям вводить нелегальные символы, которые мы ожидаем, такие как «1,2» (он распознает только «1,2»).
<! Doctype html> <html lang = "zh-cn" ng-app = "CustomValidation"> <Head> <meta charset = "utf-8"> <Title> CustomValidation </title> <style type = "text/css"> .ng-cloak {display: none; } .css-form input.ng-invalid.ng-dirty {фоновое цветное: #fa787e; } .css-form input.ng-valid.ng-dirty {фоновое цветное: #78fa89; } </style> </head> <body> <div> <form novalidate name = "formname"> <div> size (целое число 0-10): <input integer type = "number" ng-model = "size" name = "size" min = "0" max = "10"/> {{size}} <brbr/> <span ng-show = "formname. a valid integer</span> <span ng-show="formName.size.$error.min || formName.size.$error.max"> The value must be between 0 and 10</span> </div> <div> Length (floating point): <input type="text" ng-model="length" name="length" smart-float/> {{length}}<br/> <span ng-shef = "formname.length.0error.float"> это не является допустимым номером с плавающей точкой </span> </div> </form> </div> <script src = "../ angular-1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = var app = varcular. []); var integer_regexp =/^/-?/D*$/; app.directive ("Integer", function () {return {retempt: "ngmodel", // ngmodelcontroller link: function (racpe, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewvalue) {// $ parsers, updates from view to model uelge integer_re. // Сертифицируйте и обязательно CTRL. $ SetVality ("Integer", True); var Float_Regexp = /^/-?/d+(?:1.,,/D+)?$/; app.directive ("SmartFloat", function () {return {retempt: "ngmodel", ссылка: функция (сфера, ele, attrs, ctrl) {ctrl. $ parsers.unshift (function (viewvalue) {if (float_regexp.test (viewvalue)) {ctr. parsefloat (viewvalue.replace (",", ".");5. Реализация пользовательского управления формой (с помощью NGModel)
Угловой реализует основные элементы управления всем HTML (вход, выберите, Textarea) и компетентен для большинства сценариев. Однако, если нам нужно быть более гибким, мы можем достичь цели настройки управления формой, написав директиву.
Чтобы разработать элементы управления и NGModel для совместной работы и реализации двунаправленного привязки данных, это требует:
Реализация метода рендеринга - это метод, ответственный за рендеринг данных после выполнения и передачи всех методов NgmodelController. $ Formatters.
Вызовите метод $ setViewValue, и модель должна быть обновлена в ответ независимо от того, когда пользователь взаимодействует с элементом управления. Обычно это реализуется в DOM Event Sulderer.
Вы можете просмотреть $ compileprovider.directive для получения дополнительной информации.
В следующем примере показано, как добавить двустороннюю функцию привязки данных к элементу, который можно отредактировать.
<! Doctype html> <html lang = "zh-cn" ng-app = "CustomControl"> <Head> <meta charset = "utf-8"> <Title> CustomControl </title> <style type = "text/css"> .ng-cloak {display: none; } div [довольствоваемое] {cursor: pointer; фоновый цвет: #d0d0d0; } </style></head><body ng-controller="MyCtrl"><div> <div contenteditable="true" ng-model="content">My Little Dada</div> <pre>model = {{content}}</pre> <button ng-click="reset()">reset model tirgger model to view($render)</button></div><script src = "../ angular -1.0.1.js" type = "text/javascript"> </script> <script type = "text/javascript"> var app = angular.module ("customcontrol", []); app.controller ("myctrl", function ($ scope) {$ scope.reset = function () {$ scope.content = "My Little Dada"; // Как получить ngmodelController здесь? app.directive ("Coteededitable", function () {return {require: "ngmodel", ссылка: function (scope, ele, attrs, ctrl) {// view -> model ele.bind ("blur keyup", function () {scope. $ Apply (function () {console.log ("setViewUp"); Ctrl. $ SetViewValue (ELE.Text (); }); </script> </body> </html>