如何验证使用 ng 重复、ng 显示(角度)动态创建的输入

2022-08-30 02:04:59

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

这是我现在的代码:

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

我已尝试删除来自索引,但这也不起作用。截至目前,输入的验证属性工作正常,但不显示错误消息。{{}}

有人有什么建议吗?

编辑:除了下面的精彩答案外,这里还有一篇博客文章,更详细地介绍了这个问题:http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/


答案 1

自从提出这个问题以来,Angular团队通过使动态创建输入名称成为可能来解决这个问题。

使用Angular版本1.3及更高版本,您现在可以执行以下操作:

<form name="vm.myForm" novalidate>
  <div ng-repeat="p in vm.persons">
    <input type="text" name="person_{{$index}}" ng-model="p" required>
    <span ng-show="vm.myForm['person_' + $index].$invalid">Enter a name</span>
  </div>
</form>

演示

Angular 1.3还引入了ngMessages,这是一个更强大的表单验证工具。您可以对 ngMessages 使用相同的技术:

<form name="vm.myFormNgMsg" novalidate>
    <div ng-repeat="p in vm.persons">
      <input type="text" name="person_{{$index}}" ng-model="p" required>
      <span ng-messages="vm.myFormNgMsg['person_' + $index].$error">
        <span ng-message="required">Enter a name</span>
      </span>
    </div>
  </form>

答案 2

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/