带有动态错误消息的angularJs表单验证

debugcn 发表于 Dev

Praveen D

我想验证一种形式，其中每个输入每个输入可能会有很多错误消息。我想从javaScript编写这些错误消息。

的HTML

<input name="username" ng-model="user.username" type="text" placeholder="Username" required>
<div class="field-message" ng-messages="frm.username.$error" ng-if='frm.username.$dirty' ng-cloak>
     <div ng-message="required">Username is required</div>
</div>

angular.module('DemoApp', ['ngMessages']);    
angular.bootstrap(document.getElementById('demoApp'), ['DemoApp']);

在上面的代码中，ng-message指令具有错误消息，如果输入无效，则会显示该错误消息。如果要验证的案例太多，并且每种案例都有不同的错误消息，则必须在html中添加多个ng消息以用于特定的输入控件。

我只想在html中输入标签，并且错误消息来自javascript。

我怎样才能做到这一点？

看到这个问题：如何向AngularJS表单添加自定义验证？

总结一下：

您可以使用ui-validate

或者

您可以像这样创建自定义验证（从原始问题的答案中复制）：

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>

编辑：根据OP的要求，仅打印相关错误：

Plunkr：http：//plnkr.co/edit/KN0Oukb8uACvZjtGPUg4？p = preview

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.doSomething = function() {
    alert('Submitted!');
  }

  $scope.getErrors = function() {
    if ($scope.myForm.fruitName.$error.required) {
      return 'This field is required';
    } else if ($scope.myForm.fruitName.$error.blacklist) {
      return 'The phrase ' + $scope.data.fruitName + ' is blacklisted';
    }
  }
});

app.directive('blacklist', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attr, ngModel) {
      var blacklist = attr.blacklist.split(',');
      ngModel.$parsers.unshift(function(value) {
        ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
        return value;
      });
    }
  };
});

.invalid {
  color: red;
}
.ng-invalid {
  border-color: red;
}

<!DOCTYPE html>
<html ng-app="angularjs-starter">
    <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <form name="myForm" ng-submit="doSomething()">
       <div>Please <u>don't</u> type the words: coconuts, bananas or pears.</div>
       <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
       <span class="invalid" ng-show="myForm.fruitName.$error">{{getErrors()}}</span>
       <br/>
       <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
       <button type="button" ng-click="getErrors()">Get errors</button>
    </form>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。