Как создавать директивы на основе форм в AngularJS

Метод: validateChildForm

Этот метод тот же, который определен внутри Controller . Этот метод будет вызываться, когда пользователь обновляет информацию в представлении директивы.

Объект: продукт

Этот объект содержит информацию о продукте, который приобретается. Наше демо использует сравнительно небольшой объект с несколькими свойствами. Реальное приложение моей команды содержит большой объем информации, которая используется для принятия решений в приложении. Он передается в validateChildForm для предоставления контекста тому, что проверяется.

Директива Связывание

Наши директивы будут использовать функцию postLink , передавая ей объект области видимости. В дополнение к этому функция postLink принимает несколько других параметров. Это следующие:

1. scope — используется для получения доступа к изолированной области, созданной для каждого экземпляра директивы.
2. iElement — используется для получения доступа к элементарным предметам. Безопасно обновлять и изменять элемент, которому он был назначен, из функции postLink .
3. iAttrs — используется для получения доступа к атрибутам, которые находятся в том же теге, в котором была создана директива.
4. controller — может использоваться в функциях связывания, если существуют зависимости от внешнего контроллера. Они должны соответствовать обязательному свойству Directive Object .
5. transcludeFn — функция такая же, как перечисленная в параметре $transclude Directive Object .

link отвечает за присоединение всех слушателей DOM и обновление DOM с помощью элементов view.

 link: function postLink(scope) { // Indicates if the form is disabled scope.disabled = true; scope.saveForm = function () { // Code for saving the form data }; // Register form scope $timeout(function() { }); } 

Зарегистрируйте область формы

 $timeout(function () { scope.form.fields = ['name','amount']; scope.registerFormScope(scope.form, scope.$id); }); 

Обертывание метода registerFormScope пределах $timeout задерживает выполнение до конца стека выполнения. Это дает компилятору достаточно времени для завершения всех необходимых связей между контроллером и директивой. scope.form.fields — это массив, который представляет собой имя свойств, которые находятся в Form Controller это важно для установки ошибок проверки на стороне сервера. Цель registerFormScope — отправить Form Controller родительскому контроллеру, позволяя вновь созданной форме быть дочерней по отношению к parentForm .

Подтвердить, когда информация меняется

 scope.saveForm = function () { scope.validateChildForm(scope.form, scope.giftData, scope.product) .then(function () { angular.forEach(scope.form.fields, function (val) { scope.form.$setValidity(val, true); scope.form[val].$error.server = false; }); scope.disabled = true; }, function (invalidFields) { angular.forEach(invalidFields, function (val) { if (angular.isDefined(scope.form[val])) { scope.form[val].$error.server = true; scope.form.$setValidity(val, false); } }); scope.disabled = false; }); }; 

Когда форма изменяется и пользователь готов к ее проверке, saveForm метод saveForm в директиве. Этот метод, в свою очередь, будет вызывать метод validateChildForm контроллера, передавая Form Controller , scope.giftData и scope.product . Контроллер возвращает обещание, которое будет разрешено или отклонено в зависимости от дополнительных правил проверки.

Когда обещание отклонено, контроллер вернет поля, которые были недействительными. Это используется для аннулирования формы (и parentForm ) наряду с установкой дополнительных ошибок на уровне поля. В нашей демонстрации мы используем простую пост-проверку поля количества и не возвращаем причину, по которой это не удалось. Отказ от validateChildForm может быть настолько сложным или простым, как требует ваше приложение.

Когда обещание возвращается успешно, директива должна установить действительность полей в форме. Код также должен очищать любые ранее выявленные ошибки сервера. Это гарантирует, что Директива не дает ошибочных ошибок пользователю. Установка всех полей с $setValidity ссылается на parentForm в контроллере, чтобы также установить его действительность, при условии, что все дочерние формы действительны.

Установка наших взглядов

Представления не очень сложны, и для нашей демонстрации мы распределили продукты по следующим полям: name и amount . На следующем этапе мы рассмотрим мнения, необходимые для завершения этого приложения.

Обзор кода вида можно найти здесь (продукт A) и здесь (продукт B) .

Просмотр маршрута

 <div data-ng-app="myApp" ng-controller="stageController"> <div id="main" class="container"> <h1>Review Order</h1> <form name="parentForm" novalidate> <div ng-repeat="gift in gifts" class="row"> <div class="col-lg-12" ng-if="gift.product.type == 'A'" product-A data-register-form-scope="registerFormScope" data-gift-data="gift.giftData" data-validate-child-form="validateChildForm" data-product="gift.product"> </div> <div class="col-lg-12" ng-if="gift.product.type == 'B'" product-B data-register-form-scope="registerFormScope" data-gift-data="gift.giftData" data-validate-child-form="validateChildForm" data-product="gift.product"> </div> </div> </form> <div class="row"> <div class="col-lg-12"> <button class="btn btn-primary" data-ng-click="checkout()">Checkout</button> <div class="alert alert-success" data-ng-show="formsValid">All forms are valid!</div> </div> </div> </div> </div> 

Это представление важно, потому что оно устанавливает родительскую форму, которая будет использоваться для переноса всех дочерних форм, загружаемых из директив продукта. Использование ng-if в ng-repeat гарантирует, что DOM не будет заполняться некорректно неиспользуемым Form Controller .

Директивный вид

 <form name="form" novalidate> ... <label for="amountInput">Amount</label> <input id="amountInput" name="amount" class="text-center form-control" type="tel" data-ng-model="giftData.amount" data-ng-pattern="/^(?!\.?$)\d+(\.\d{0,2})?$/" data-ng-required="true" data-ng-disabled="disabled"/> ... <label>Actions</label> <button class="btn btn-info" ng-click="disabled=false;" ng-show="disabled">Edit</button> <button class="btn btn-success" ng-click="saveForm()" ng-show="!disabled">Save</button> ... <div class="row" data-ng-show="form.$submitted"> <div class="col-lg-12"> <div class="alert alert-danger" data-ng-show="form.name.$error.required && form.$submitted"> Recipient Name is a required field. </div> <div class="alert alert-danger" data-ng-show="form.amount.$error.pattern && form.$submitted"> The amount is invalid. </div> <div class="alert alert-danger" data-ng-show="form.amount.$error.server && form.$submitted"> The amount is not accepted. Must be between {{ product.minAmount }} and {{ product.maxAmount}}. </div> </div> </div> ... </form> 

Примечание. Представление выше было усечено в местах, связанных с макетом демонстрации и не имеет значения для этой статьи.

amountInput устанавливает шаблон проверки, который будет применяться валидатором Angular ngPattern . Поля выше будут использовать директиву ngDisabled Angular, которая оценивает выражение, и если true , поле будет отключено.

В нижней части представления мы показываем все ошибки, чтобы предоставить обратную связь пользователю, когда он нажимает кнопку Save . Это установит свойство $submitted в дочерней форме.

Завершение

Соединяя все части вместе, вот что мы в итоге получаем: