Специальная директива по проверке подлинности

Question

Я должен сделать специальную директиву для проверки формы. Таким образом, все текстовые входы будут отображаться этой директивой. Директива должна показывать ошибки валидации по мере необходимости.

директива вызова:

<ff-inputbox data-type="text" data-class="form-control" ng-model="newQuote.zipcode" data-name="zipcode" data-id="zipcode" data-placeholder="{{vocab.retrv_saveQuote.zip_lable}}" data-pattern="/^(\d{5}-\d{4}|\d{5})$/" data-required="required"> 
</ff-text> 

директива:

app.directive('ffInputbox', [function ($parse) { 
     return { 
        scope: { 
       type : '@', 
       class : '@', 
       name : '@', 
       id : '@', 
       placeholder : '@', 
       pattern : '@', 
       required : '@' 
      }, 
      restrict: 'E', 
      replace: true, 
      templateUrl: 'modules/common/directives/ff-inputbox.tpl.html', 
      link: function(scope, elem, attr){ 
       var ar = scope.formName;   
       var ar1 = scope.name; 

      console.log(elem.$error); 

      } 
     };  
     }]); 

ФФ-inputbox.tpl.html

<input type={{type}} class={{class}} name={{name}} id={{id}} placeholder={{placeholder}} ng-pattern={{pattern}} required={{required}} minLength="3"></input> 

////// /////////////////////////// Теперь я думаю использовать ng-сообщения, для которых мне нужен список ошибок. Соответственно, я покажу сообщение об ошибке msg на условиях $ touched, $ valid, $. Это правильный подход? Как я могу получить список ошибок $ внутри функции ссылки? Или нужен ли контроллер здесь?

Answer 1

Во-первых, вам нужен элемент формы с набором атрибутов name и содержащий эти поля внутри. Затем вы можете отобразить сообщение об ошибке для недопустимых полей.

Во-вторых, определите шаблон html (например, error-messages.tpl.html ниже), содержащий коды ошибок с их сообщениями. Затем добавьте этот шаблон для каждого поля. Он отобразит сообщение в соответствии с типом ошибки.

ошибок messages.tpl.html

<span ng-message="required" >This is mandatory</span> 
<span ng-message="minLength" >Too Short</span> 
<span ng-message="number" >Invalid number</span> 
<span ng-message="date" >Invalid date</span> 
<span ng-message="email" >Invalid email</span> 
... 

INJECT ngMessages к вашему модулю. Как показано ниже

angular.module('testModule',['ngRoute', 'ngResource', ..... , 'ngMessages']) 

Теперь в файле шаблона ff-inputbox.tpl.html, Вам нужно будет добавить сообщение DIV с каждым входом для отображения сообщений об ошибках. (учитывая имя формы testForm)

<input type={{type}} class={{class}} name={{name}} id={{id}} placeholder={{placeholder}} ng-pattern={{pattern}} required={{required}} minLength="3"></input> 

<div ng-messages="testForm[name].$error" ng-messages-include="error-messages.tpl.html" class="text-danger"></div> 

Это покажет сообщение об ошибке. Однако я его не тестировал.