Недавно оставшиеся ошибки компонентов, поддерживаемых в руках, являются проверкой формы, и логика внутри кода проверки формы компании была неясна для поколений, и структура кода не очень угловая.
Очень необходимо иметь глубокое понимание проверки формы.
<body ng-controller = "maincontroller"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name"> </form> </body>
NGModel-это угловая черная магия, которая реализует двустороннюю переплет. Когда изменение значения имени изменится, входное значение также изменится.
Когда пользовательский ввод изменяет значение, значение имени также изменится.
Цель Novalidate = "novalidate" - удалить проверку формы, которая поставляется с системой.
После анализа вышеуказанного кода Angular будет генерировать переменную «форму» и $ accope.form под применением $ MainController. Название этой переменной такое же, как и имя в HTML.
И $ scope.form.text - это модель блока ввода текста, унаследованная от ngmodelcontroller.
Где $ scope.form экземпляр от FormController. Его содержание:
Модель (то есть $ scope.form.text) поля ввода текста:
где $ dirty/$ нетронутая, $ alline/$ недействительна, $ ошибка являются общими атрибутами. Особенно $ ошибка.
Самая простая проверка формы:
После понимания формы и блока ввода вы можете сначала отредактировать простейшую команду, чтобы отобразить ошибку.
Контент HTML выглядит следующим образом:
<form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name" trirs-tip> </form>
Код команды заключается в следующем:
// Когда возникает ошибка ввода в окне ввода, ошибка отображается директива ("errortip", function ($ compile) {return {Restract: "a", require: "ngmodel", ссылка: функция ($ actope, $ element, $ attrs, $ ngmodel) {// Создание субскопа subscope = $ spaspe. ng-if = "haserror ()"> {{errors () |. {Электронная почта: true, xxx: true, xxxx: trie} $ scope.errors = function () {return $ ngmodel. $ error;} // Скомпилируйте неправильную инструкцию и поместите ее в поле ввода после $ ement.after ($ compile (tip) (подсказка));}}});Давайте сначала посмотрим на результаты исполнения:
При вводе неверного адреса электронной почты:
При вводе правильного адреса электронной почты:
Директива об ошибках начинается с получения NgmodelController через требование: «ngmodel». Затем создайте элемент, чтобы отобразить ошибку в поле ввода.
Здесь используется компиляция $, а $ compil используется для динамического компиляции и отображения HTML -контента.
Когда есть содержимое ошибки, будет отображаться неправильный элемент.
Почему подсказка может получить доступ к методам Haserror и ошибок?
Из -за цепочки прототипа. Просто посмотрите на картинку ниже, чтобы узнать.
Настроить содержимое ошибки
Хорошо, очевидно, что проверка формы сейчас недоступна. Мы должны настроить отображение содержимого ошибки, и для отображения есть более одной ошибки.
Используйте NG-Repeat для отображения нескольких ошибок, то есть используйте команду "Errortip"
tip = '<span ng-if = "haserror ()"> {{errors () | json}} </span> ';Изменить на:
tip = '<ul ng-if = "haserror ()" ng-repeat = "(errorkey, errorValue) в errors ()">' +'<span ng-if = "errorValue"> {{errorKey | errorfilter}} </span> ' +' </ul> ';где errorfilter является фильтром для пользовательского отображения сообщений об ошибках. Фильтр на самом деле является функцией.
Код заключается в следующем:
.filter ("errorfilter", function () {return function (input) {var errormessAgesmap = {email: "Пожалуйста, введите правильный адрес электронной почты", xxOO: "Не подходит для детей"} return errormessAgesmap [input];}});Результаты следующие:
Хорошо, здесь мы можем справиться с «простой» проверкой формы. Да, просто. Мы должны продолжать идти глубже.
Пользовательская проверка формы!
Затем давайте проведем проверку формы, которая не может быть введена в «Красивого парня».
Инструкции следующие:
.directive ("donotinputhandsomeboy", function ($ compile) {return {RESTRICT: "A", TES: "ngmodel", ссылка: функция ($ actope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers Неверная, $ ошибка станет {красивой: true} $ ngmodel. $ setVality ("красиво", false);} return value;})}}})Результаты следующие:
Здесь есть две ключевые вещи: $ ngmodel. $ Parsers и $ ngmodel. $ SetVality.
$ ngmodel. $ parsers - это массив. При введении контента в поле ввода он будет проходить и выполнять функции в $ parsers.
$ ngmodel. $ setVality («красиво», false); Установка красивой для недействительной установит $ ngmodel. $ Error ["красиво"] = true;
Удалить $ ngmodel. $$ успех ["красивый"] также установлен, и вы можете найти исходный код для деталей.
Здесь я суммирую процесс.
-> Пользовательский ввод
-> Angular выполняет все функции в $ parsers
-> Проверьте $ setVality ("xxoo", false); тогда XXOO будет установлен в $ ngmodel. $ error ["xxoo"]
-> Тогда инструкция по ошибке будет ng-repeat $ ngmodel. $ Ошибка
-> Errorfilter уйдет из сообщения об ошибке
-> Сообщение об ошибке было отображено в конце
Настройте отображение содержимого блока ввода
Много раз разработка не так проста, как проверка ошибок и отображение ошибок. Иногда нам приходится форматировать содержимое блока ввода.
Например, «1000» отображается как «1000»
"Привет" появляется как "Привет"
Теперь давайте внедрим автоматические инициалы.
Исходный код заключается в следующем:
<form name = "form" newalidate = "novalidate"> <input name = "text" type = "text" ng-model = "name" Верхний каза {ограничить: "a", require: "ngmodel", ссылка: функция ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewvalue; if (angular.isundefined (value) {viewValue = "";} else {visevalue = "viewValue =" viewValue = "viewValue =" viewValue = "viewVALUE =" viewValue = "viewVALUE = viewValue [0] .touppercase () + viewvalue.substring (1); // Установить контент интерфейса $ ngmodel. $ setviewvalue (viewvalue); // Ресурс для интерфейса, эта функция очень важна $ ngmodel. $ render ();Здесь мы используем $ setViewValue и $ render, $ setViewValue для установки ViewValue на указанное значение, а $ render отображает ViewValue для интерфейса.
Многие люди думают, что использование $ setViewValue может обновить интерфейс, но они не используют $ render, и, в конце концов, интерфейс не обновляется, независимо от того, что он делает.
Если только $ ngmodel. $ Parsers недостаточно, $ parsers запускается только тогда, когда пользователь вводит новый контент в поле ввода. Другая ситуация заключается в том, что содержание входного ящика необходимо обновить:
Это двустороннее привязка. Например, входная коробка только сейчас связана с $ scope.name в Maincontroller. Когда пользователь меняет $ scope.
В настоящее время вам нужно использовать форматеры $, так что давайте сначала посмотрим пример.
<body ng-controller = "maincontroller"> <form name = "form" novalidate = "novalidate"> <кнопка ng-click = "random ()"> random </button> <name = "text" type = "text" ng-model = "Имя" Верхнее case> </form> </body>
Контент MainController:
angular.module ("app", []). Controller ("maincontroller", function ($ scope, $ timeout) {$ scope.random = function () {$ scope.name = "hello" + math.random ();}})Это достаточно просто. Когда вы нажимаете кнопку, $ scope.name становится случайным содержанием, начиная с Hello.
Очевидно, что первоначальная буква Hello не заглавляется, а не то, что мы хотим.
Мы изменяем содержимое следующей команды:
.directive ("uppercare", function () {return {restrict: "a", reft: "ngmodel", ссылка: функция ($ scope, $ element, $ attrs, $ ngmodel) {$ ngmodel. $ parsers.push (function (value) {var viewvalue = upparcefirstword (handempemplue (value); $ ngmodel. $ setViewValue (viewValue); // рендеринг в интерфейс, эта функция очень важна $ ngmodel. $ render (); Преобразовать все содержимое в строковую функцию лярсинка (значение) {return angular.isundeficed (value)?Подводить итоги:
1
-> Пользователь вводит контент в поле ввода
-> Угловой обход функции в $ ngmodel. $ Parsers преобразует входной контент, а затем устанавливает его в $ ngmodel. $ modelValue
-> В функции в массиве $ ngmodel. $ Parsers мы изменяем $ ngmodel. $ Viewvalue, а затем $ ngmode. $ Render () рендерирует контент.
2
-> Сгенерировать случайные строки через кнопки, чтобы установить на имя
-> Каждый раз, когда грязное обнаружение будет определять, не является ли значение имени несовместимо с $ ngmodel. $ ModelValue (здесь реализовано с использованием $ watch). Если не согласовываться, выполнить все функции в форматеров $ в обратном порядке и выполнить, и назначьте окончательное возвратное значение $ ngmodel. $ ViewValue
-> Обновить содержимое ввода
Можно ли оптимизировать пример «настроить содержимое дисплея в блоке ввода»?
Зачем оптимизировать?
Причина очень проста. Для реализации «пользовательского контента» используются $ parsers и $ formatters. На самом деле, содержание двух очень похоже! Это очень важно.
Как оптимизировать?
Используйте $ ngmodel. $ Validators.
Хорошо, теперь измените пример.
.directive ("uppercare", function () {return {ограничение: "a", reft: "ngmodel", ссылка: функция ($ scope, $ element, $ attrs, $ ngmodel) {// 1.3 поддерживается. Верна ли вы вручную или обновляете модель в другие места, $ ngmodel. $ validators. upperSackFirstword (handleMptyValue (modelValue)); // Установить контент интерфейса $ ngmodel. $ setViewValue (viewValue); // Ресурс к интерфейсу, эта функция очень важна $ ngmodel. handlemptyvalue (value) {return angular.isundefined (value)?Код намного проще, только поддерживается $ ngmodel. $ Validators в версии 1.3 или выше.
Если возвратная стоимость $ ngmodel. $ Validators.uppercase функция является false, то $ ngmodel. $ Error ['uppercare'] = true. Это похоже на $ ngmodel. $ SetVality («верхний заглав», false).