Forms AngularJS中验证表单控件的方法

我和我的队友正在学习AngularJS，目前正在尝试进行一些简单的表单字段验证。我们意识到有很多方法可以做到这一点，我们已经尝试过了

通过验证过滤器输入

结合使用控制器和验证服务/工厂

输入元素上的验证指令

包含标签、输入和错误输出元素的指令

在我看来，指导方针似乎是最“正确”的。对于#3，我们遇到了必须将验证结果传递给错误元素（a

span

同级）的问题。做一些范围杂耍很简单，但将

span

也放在指令中，并捆绑整个表单控件似乎“更正确”。我们遇到了几个问题，我希望StackOverflow社区对我们的解决方案提供意见和/或澄清任何误解

var PATTERN_NAME = /^[- A-Za-z]{1,30}$/;

module.directive("inputName", [
  function () {
    return {
      restrict: "E",
      require: "ngModel",
      scope: {
        fieldName: "@",
        modelName: "=",
        labelName: "@",
        focus: "@"      
      },
      template: '<div>' +
        '<label for="{{fieldName}}">{{labelName}}</label>' +
        '<input type="text" ng-model="modelName" id="{{fieldName}}" name="{{fieldName}}" placeholder="{{labelName}}" x-blur="validateName()" ng-change="validateName()" required>' +
        '<span class="inputError" ng-show="errorCode">{{ errorCode | errorMsgFltr }}</span>' +
        '</div>',
      link: function (scope, elem, attrs, ngModel)
      {
        var errorCode = "";

        if (scope.focus == 'yes') {
          // set focus
        }

        scope.validateName = function () {
          if (scope.modelName == undefined || scope.modelName == "" || scope.modelName == null) {
            scope.errorCode = 10000;          
            ngModel.$setValidity("name", false);
          } else if (! PATTERN_NAME.test(scope.modelName)) {
            scope.errorCode = 10001;            
            ngModel.$setValidity("name", false);
          } else {
            scope.errorCode = "";
            ngModel.$setValidity("name", true);
          }
        };
      }
    };
  }
]);

var-PATTERN_-NAME=/^[-A-Za-z]{1,30}$/；
module.directive（“inputName”[
函数（）{
返回{
限制：“E”，
要求：“ngModel”，
范围：{
字段名：“@”，
型号名称：“=”，
标签名：“@”，
焦点：“@”
},
模板：“”+
“{{labelName}}”+
'' +
“{{errorCode}errorMsgFltr}”+
'',
链接：功能（范围、要素、属性、ngModel）
{
var errorCode=“”；
如果（scope.focus='yes'）{
//聚焦
}
scope.validateName=函数（）{
如果（scope.modelName==未定义| | scope.modelName==“”| | scope.modelName==空）{
scope.errorCode=10000；
ngModel.$setValidity（“名称”，假）；
}如果（！PATTERN_NAME.test（scope.modelName））{
scope.errorCode=10001；
ngModel.$setValidity（“名称”，假）；
}否则{
scope.errorCode=“”；
ngModel.$setValidity（“name”，true）；
}
};
}
};
}
]);

用作

<form novalidate name="addUser">
  <x-input-name
    label-name="First Name" 
    field-name="firstName" 
    ng-model="firstName"
    focus="yes"
    model-name="user.firstName">
  </x-input-name>

  <x-input-name 
    label-name="Last Name" 
    field-name="lastName" 
    ng-model="lastName"
    model-name="user.lastName">
  </x-input-name>
  ...
</form>

...

首先，由于

表单

和

输入

都被AngularJS指令覆盖，因此我们需要访问NGModelAPI（

ngModelController

），以允许现在嵌套的

输入

能够向父

表单控制器

传递有效性。因此，我们必须

要求：“ngModel”

，它成为

链接

功能的

ngModel

选项

其次，即使

fieldName

和

ngModel

被赋予相同的值，我们也必须分别使用它们。单向绑定（1WB）

字段名

用作属性值。我们发现不能在

ngModel

指令中使用大括号。此外，我们不能对

ngModel

使用1WB输入，也不能对静态值使用双向绑定（2WB）输入。如果我们使用一个2WB输入，模型可以工作，但是像

id

和

name

这样的属性将成为表单控件的值

最后，因为我们有时以相同的形式（例如，名字和姓氏）重用指令，所以我们必须传递

focus

参数等属性

---

就我个人而言，我还希望在

link

函数中看到使用JavaScript绑定的

onblur

和

onchange

事件，但我不确定如何从

链接中访问模板标记，特别是在大DOM之外/不知道大DOM。
看看这个优秀的例子，它展示了如何使用AngularJS执行表单验证。