Question

您好，我是Angularjs的初学者，我想构建动态验证。这是我的代码尽可能缩短。

JS

$scope.inputValidates = [
      { 'name':'name',
        'validate':'required',
      },
      { 'name':'email',
        'validate':'type = email',
      }]

HTML

<div ng-repeat="vitem in vm.inputValidates">
          <input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]"             {{item.validate}}>
</div>

我希望此输入结果为

<input name=name ng-model="vm.useraccount[vitem.name]    required>
<input name=name ng-model="vm.useraccount[vitem.name]    type = email>

感谢您抽出宝贵时间。

Answer 1

使用ng-required：

<div ng-repeat="vitem in vm.inputValidates">
    <input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>

顺便说一下，我看到您已将inputValidates分配给$scope。因此，您应该在inputValidates的视图中访问它，而不是vm.inputValidates。

Answer 2

示例 HERE

示例包含对使用ng-repeat呈现的文本框应用的必需和模式验证，并根据您的验证类型使用ng-switch

    <div ng-repeat="field in fields">
   <div style="width:600px">
      <div ng-form name="validMe" style="width:58%;float:left" ng-switch="field.validationType">
         {{field.name}} :
         <div ng-switch-when="required">
            <input id="input{{$index}}"  name="input{{$index}}" type="text" ng-model="field.value" required> 
            <span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Field Required!</span>
         </div>
         <div ng-switch-when="email">
            <input type="email" id="input{{$index}}"  name="input{{$index}}" ng-model="field.value" ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
            <span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid email!</span>
         </div>
      </div>
   </div>
</div>

如何在angularjs中的ng-repeat下动态验证

2 个答案: