AngularJS：如何验证ng-repeat表单字段

发布时间：2020-12-17 17:20:46 所属栏目：安全来源：网络整理

导读：下面的代码是我尝试验证表单中的值列表.这些值位于ng-repeat指令中的表中,应根据需要进行验证.任何输入将不胜感激. form name="form1" table tr ng-repeat="param in params" td {{param.name}} /td td input name="i{{$index}}" ng-model="param.val" requi

下面的代码是我尝试验证表单中的值列表.这些值位于ng-repeat指令中的表中,应根据需要进行验证.任何输入将不胜感激.

<form name="form1">
  <table>
    <tr ng-repeat="param in params">
     <td>
        {{param.name}}
     </td>
     <td>
         <input name="i{{$index}}" ng-model="param.val" required />
         <span style="color:red" ng-show="form1.i{{$index}}.$dirty && form1.i{{$index}}.$invalid">
            <span ng-show="form1.i{{$index}}.required">This field is required</span>
         </span>
       </td>
     </tr>
  </table>
</form>

解决方法

我认为@SunilD’2对另一个答案的评论值得回答它自己的答案,因为使用ng-form的方法可以促进更多的验证方案(例如,突出显示表中其中一个输入无效的行)

<form name="form1">
  <table>
    <tr ng-repeat="param in params">
     <td>
        {{param.name}}
     </td>
     <td ng-form="cellForm">
         <input ng-model="param.val" required />
         <span ng-show="cellForm.$dirty && cellForm.$invalid">
            <span ng-show="cellForm.$error.required">This field is required</span>
         </span>
       </td>
     </tr>
  </table>
</form>

嵌套ng-form的有效性设置其父表单的有效性.

plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!