如何验证使用ng-repeat，ng-show（角度）动态创建的输入

一尘不染

如何验证使用ng-repeat，ng-show（角度）动态创建的输入

angularjs

我有一个使用ng-
repeat创建的表。我想向表中的每个元素添加验证。问题在于每个输入单元格与其上方和下方的单元格名称相同。我试图使用该{{$index}}值来命名输入，但是尽管HTML中的字符串文字看起来正确，但现在可以正常工作。

到目前为止，这是我的代码：

<tr ng-repeat="r in model.BSM ">
   <td>
      <input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" required/>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>Requires a number.</strong></span>
      <span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*Required</strong></span>
   </td>
</tr>

我试过{{}}从索引中删除from，但是那也不行。到目前为止，输入的验证属性可以正常工作，但是不会显示错误消息。

有人有什么建议吗？

编辑：
除了以下出色的答案之外，这是一篇博客文章，其中更详细地介绍了此问题：http : //www.thebhwgroup.com/blog/2014/08/angularjs-
html-form-design-part-2 /

阅读 232

2020-07-04

共1个答案

一尘不染

AngularJS依靠输入名称来暴露验证错误。

不幸的是，到今天为止，不可能（不使用自定义指令）动态生成输入的名称。确实，检查输入文档，我们可以看到name属性仅接受字符串。

要解决“动态名称”问题，您需要创建一个内部表单（请参阅 ng-
form）：

<div ng-repeat="social in formData.socials">
      <ng-form name="urlForm">
            <input type="url" name="socialUrl" ng-model="social.url">
            <span class="alert error" ng-show="urlForm.socialUrl.$error.url">URL error</span>
      </ng-form>
  </div>

另一种选择是为此编写一个自定义指令。

这是显示ngForm用法的jsFiddle：http
:
//jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

2020-07-04