Angularjs 表单验证自定义指令

我必须为表单验证制定一个自定义指令。这样所有文本输入都将由该指令呈现。指令应在需要时显示验证错误

指令调用：

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

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

///////////////////////////////// 现在我想使用ng消息，我需要$error list。因此，我将在$toucted、$valid、$submitted条件上显示错误消息。

---

这是正确的方法吗？如何在link函数中获取$error列表？还是这里需要一个控制器

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

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

错误消息.tpl.html

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

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

现在，在模板文件

ff inputbox.tpl.html

中，您需要为每个输入添加一个message div以显示错误消息。（考虑到表单名称为testForm）

---

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

谢谢。我需要在自定义指令中要求ngMessages指令吗？以及ng messages=“testForm[name]。$error”如何工作？我是否还需要将表单名称作为属性传递，然后将其称为{{formName}}[name]。$error？我尝试使用您编写的内容，但它给了我一个错误：找不到指令“ngMessagesInclude”所需的控制器“ngMessages”@Isha您需要将ngMessages注入模块。我已经更新了答案。看一看。