【问题标题】:Dynamically generating validation attribute on input using interpolation使用插值在输入上动态生成验证属性
【发布时间】:2026-01-23 19:30:01
【问题描述】:

编辑:从 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 使用包装器的原因是我无法使用插值动态生成输入元素的名称属性,并且我必须将每组重复输入包装在 ngForm directive并将它们嵌套在外部表单元素中。

同样,问题在于属性ng-minlength="field.ValidationAttributes['data-val-length-min']" 没有正确设置。

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

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

<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>

【问题讨论】:

    标签: javascript angularjs angularjs-directive


    【解决方案1】:

    您好,您可以使用双 {} 插入动态验证规则,请参见此处: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
      };
    

    【讨论】: