使用插值在输入上动态生成验证属性 [英] Dynamically generating validation attribute on input using interpolation

问题描述

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

This question is no longer relevant as of Angular version: 1.3.0-beta.12 you can now parse ng-minlength and ng-maxlength dynamic values. See: https://github.com/angular/angular.js/issues/5319

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

My problem is quite simple: I need to dynamically create input validation (ex. ng-minlength) using interpolation.

这样做，我遇到了一些问题，特别是为 ng-minlength 和 ng-maxlength 生成验证属性.我认为这是由于它们仅采用常量吗?

And doing that I am running into some issues specifically generating the validation attributes for ng-minlength and ng-maxlength. I assume this is due to them only taking constants?

下面您可以看到我的代码，我通过externalForm使用包装器的原因是，我无法使用插值法动态生成输入元素的名称属性，并且必须将每组重复的输入包装在中ngForm指令，并将其嵌套在外部表单元素中.

Below you can see my code, the reason I am using a wrapper through outerForm is that I cannot dynamically generate the name attribute of input elements using interpolation, and that I have to wrap each set of repeated inputs in an ngForm directive and nest these in an outer form element.

同样，问题出在属性 ng-minlength ="field.ValidationAttributes ['data-val-length-min']" 上.

So again, the problem lies in the attribute ng-minlength="field.ValidationAttributes['data-val-length-min']" not being properly set.

当我使用 {{field.ValidationAttributes ['data-val-length-min']}} 直接打印值时，该值显示正确.

When I print the value directly using {{field.ValidationAttributes['data-val-length-min']}} the value appears correct.

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

Do I have to create a directive to parse my information, do I need to create my own min/max validation or am I simply running into a syntax error?

<form name="outerForm">
   <div ng-repeat="field in logEntry.StringValues">
      <ng-form name="innerForm">
         <input type="text" name="foo" ng-model="item.foo" ng-minlength="field.ValidationAttributes['data-val-length-min']" required/>
         <span ng-show="innerForm.foo.$error.required">required</span>
         <span ng-show="innerForm.foo.$error.minlength">to short</span>
      </ng-form>
   </div>
</form>

推荐答案

您好，您可以使用double {}插值动态验证规则，请参见此处:

Hi you can use double {} to interpolate dynamic validation rules please see here: http://jsbin.com/xayiro/1/

如果您可以发布字段.ValidationAttributes模型，我可以更新jsbin.

If you can post you field.ValidationAttributes model I can update 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
  };

这篇关于使用插值在输入上动态生成验证属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！