Question

AngularJS在其表单上提供了他们所谓的“模型标志”。例如，您可以使用formName。$ dirty，formName。$ invalid等。我想知道的是如何为AngularJS表单创建自己的自定义标志？高水平的演示或链接到文章将是一个充分的答案。

Answer 1

见这里：how-to-add-custom-validation-to-an-angular-js-form。

简而言之，这是一个自定义的valitation指令示例：

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          // for DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

这是它的一个例子：

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

但是，请再次阅读引用的问题并接受答案，它更完整......

如何在Angular表单上扩展AngularJS模型标志？

1 个答案: