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);

            }
        };    
      }]);

FF-inputbox.tpl.html

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

///////////////////////////////// 现在我想使用ng-messages，我需要$ error list。因此，我将在$ touch，$ valid，$ submitted条件上显示错误消息。这是一种正确的方法吗？我将如何在链接函数中获取$ error列表？或者这里是否需要控制器？

Answer 1

首先，您需要一个表单元素，其中包含name属性并在其中包含这些字段。然后，您可以显示无效字段的错误消息。

其次，定义包含错误代码及其消息的html模板（如error-messages.tpl.html bellow）。然后为每个字段添加此模板。它将根据错误类型显示消息。

错误-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> ...

向您的模块注入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>

这将显示错误消息。我没有测试过它。

表单验证自定义指令

1 个答案: