使用插值在输入上动态生成验证属性

时间:2014-07-07 07:14:11

标签: javascript angularjs angularjs-directive

编辑:此问题与Angular version: 1.3.0-beta.12不再相关,您现在可以解析ng-minlength和ng-maxlength动态值。请参阅:https://github.com/angular/angular.js/issues/5319

我的问题很简单:我需要使用插值动态创建输入验证(例如ng-minlength)。

这样做我遇到了一些专门为ng-minlengthng-maxlength生成验证属性的问题。我认为这是因为他们只采取常数?

下面你可以看到我的代码,我通过outerForm使用包装器的原因是我无法使用插值动态生成输入元素的name属性,并且我必须将每组重复输入包装在{{1并将它们嵌套在外部表单元素中。

同样,问题在于属性ngForm directive未正确设置。

当我使用ng-minlength="field.ValidationAttributes['data-val-length-min']"直接打印值时,该值显示正确。

我是否必须创建一个指令来解析我的信息,我是否需要创建自己的最小/最大验证,或者我只是遇到语法错误?

{{field.ValidationAttributes['data-val-length-min']}}

1 个答案:

答案 0 :(得分:1)

您好,您可以使用double {}来插入动态验证规则,请参阅此处:http://jsbin.com/xayiro/1/

如果您可以发布field.ValidationAttributes模型,我可以更新jsbin。

HTML:

 <ng-form name="innerForm">
     <input type="text" name="foo" ng-model="item.foo" ng-minlength="{{validation.minlength}}" required/>
     <span ng-show="innerForm.foo.$error.required">required</span>
     <span ng-show="innerForm.foo.$error.minlength">to short</span>
  </ng-form>

JS:

 $scope.validation= {

    maxlength:20,
    minlength:3
  };