如何验证使用 ng-repeat、ng-show(角度)动态创建的输入 [英] How to validate inputs dynamically created using ng-repeat, ng-show (angular)

问题描述

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

这是我目前的代码:

<td><input ng-model="r.QTY" class="span1" name="QTY{{$index}}" ng-pattern="/^[\d]*\.?[\d]*$/" 需要/><span class="alert-error" ng-show="form.QTY{{$index}}.$error.pattern"><strong>需要一个数字.</strong></span><span class="alert-error" ng-show="form.QTY{{$index}}.$error.required"><strong>*必需</strong></span></td></tr>

我尝试从索引中删除 {{}}，但这也不起作用.截至目前，输入的验证属性工作正常，但未显示错误消息.

大家有什么建议吗?

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

解决方案

AngularJS 依赖输入名称来暴露验证错误.

不幸的是，截至今天，(不使用自定义指令)动态生成输入的名称是不可能的.事实上，检查 input docs 我们可以看到name 属性只接受一个字符串.

要解决动态名称"问题您需要创建一个内部表单(请参阅ng-form):

<ng-form name="urlForm"><input type="url" name="socialUrl" ng-model="social.url"><span class="alert error" ng-show="urlForm.socialUrl.$error.url">网址错误</span></ng-form>

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

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

I have a table that is created using ng-repeat. I want to add validation to each element in the table. The problem is that each input cell has the same name as the cell above and below it. I attempted to use the {{$index}} value to name the inputs, but despite the string literals in HTML appearing correct, it is now working.

Here is my code as of now:

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

I have tried removing the {{}} from index, but that does not work either. As of now, the validation property of the input is working correctly, but the error message is not displayed.

Anyone have any suggestions?

Edit: In addition to the great answers below, here is a blog article that covers this issue in more detail: http://www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2/

解决方案

AngularJS relies on input names to expose validation errors.

Unfortunately, as of today, it is not possible (without using a custom directive) to dynamically generate a name of an input. Indeed, checking input docs we can see that the name attribute accepts a string only.

To solve the 'dynamic name' problem you need to create an inner form (see 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>

The other alternative would be to write a custom directive for this.

Here is the jsFiddle showing the usage of the ngForm: http://jsfiddle.net/pkozlowski_opensource/XK2ZT/2/

这篇关于如何验证使用 ng-repeat、ng-show(角度)动态创建的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！