简体   繁体   English

AngularJS指令进行验证

[英]AngularJS directive for validation

I am trying create a custom directive to validate an input field's text against a list. 我正在尝试创建一个自定义指令,以针对列表验证输入字段的文本。

For example I have a list defined in my controller: 例如,我在控制器中定义了一个列表:

$scope.examples = [
        {"name":"Jeff"},
        {"name":"John"},
        {"name":"Sarah"},
        {"name":"Julie"}
      ];

and my directive looks something like this: 我的指令看起来像这样:

 .directive('customValidation', function () {
  return {
    restrict:'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function(input){
          if(input === scope[attrs.customValidation]) {
            ctrl.$setValidity('customValidation', true);
            return input;
          }
          else {
            ctrl.$setValidity('customValidation', false);
            return undefined;
          }
        });
    }
  }; 
}); 

So I can compare a list in my view like so: 因此,我可以像这样比较视图中的列表:

<form name = "form">

  <ul>
      <li ng-repeat="item in examples" name='list' ng-model="item.name">     
       {{item.name}}</li>
  </ul>

  <input type='text' id='input' required name='input'    
  custom-validation='item.name' ng-model='input2'>   

  <p ng-show='form.input2.$valid'>Already a name</p>

  <button ng-disabled="form.$valid">Add user</button>

But I am a little stuck and I think my directive needs some tweaking but I am not sure. 但是我有点困惑,我认为我的指令需要一些调整,但是我不确定。 Thanks in advance for your help! 在此先感谢您的帮助!

I have added several modifications to your original code it has so many typos and misleadings. 我已经对您的原始代码进行了一些修改,它有很多错别字和误导性。 And I adapt it to be up-to-date with the last release of AngularJS (1.3.x) api. 我将其调整为最新版本的AngularJS(1.3.x)API。

Directive 指示

myApp.directive('customValidation', function() {
    return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            collection: '=',
            property: '@'
        },
        link: function(scope, element, attrs, ctrl) {
            ctrl.$validators.customValidation = function(model, viewValue) {
                // Check if viewValue is not empty (:
                if (!ctrl.$isEmpty(viewValue)) {
                    // Search in the collection if the username already exist.
                    var tot = scope.collection.filter(function(x) {
                        return x[scope.property].toUpperCase() === viewValue.toUpperCase()
                    });

                    // Other user(s) with the same name has been founded.
                    if (tot.length > 0)
                        return true;                        
                }                
                // Valid state.
                return false;
            }
        }
    }
});

HTML 的HTML

<form name="form">
    <ul>
        <li ng-repeat="item in examples" name='list' ng-model="item.name">
            {{item.name}}</li>
    </ul>

    <input type='text' id='input' required name='input' custom-validation collection="examples" property='name' ng-model='input2' />

    <p ng-show='!form.input.$error.customValidation'>Already a name</p>

    <button ng-disabled="form.$valid">Add user</button>
</form>

Look this in action at Fiddler 看看Fiddler的实际情况

https://jsfiddle.net/8tptzocm/1/ https://jsfiddle.net/8tptzocm/1/

I hope this is what you was looking for, 我希望这就是你想要的,

Cheers. 干杯。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM