如何使用 Angular 验证表行数据?

2024-01-12

I have table with ng-repeat对于表行。我想对单行数据进行内联编辑和验证,但不可能使用form or ng-form里面的表。 对于内联编辑,我使用输入ng-show inside td。 所以,我有两个问题:

  1. 这是内联编辑的正确方法吗? (使用隐藏输入 里面td)。

  2. 如何验证行中的数据?

Update:我想要表格行类似“表单提交”的内容,并为具有错误数据的表格单元格添加错误类。

我是角度新手。


NG-Form 适用于非 HTML 表单的元素。因此,您应该能够在表中使用内置的 ng-form 验证。它似乎为我正确地跟踪了每行的表格。

https://docs.angularjs.org/api/ng/directive/form https://docs.angularjs.org/api/ng/directive/form

 <tr ng-repeat="market in markets | orderBy:'name'" ng-form name="myForm">
   <td>{{market.id}}</td>
   <td ng-class="{'has-error': !myForm.minimum.$valid}">
     <input type="number" name="minimum" min="0" max="10000" ng-model="market.minimum" />
   </td>
   <td ng-class="{'has-error': !myForm.cash.$valid}">
    <input type="number" ng-model="market.cash" min="0" name="cash" />
  </td>
  <td>
    <input type="submit" ng-disabled="!myForm.$valid" ng-click="save(market)"/>
  </td>
</tr>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Angular 验证表行数据? 的相关文章

随机推荐