如何验证使用ng-repeat,ng-show(角度)动态创建的输入
我有一个使用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,但是那也不起作用。到目前为止,输入的验证属性可以正常工作,但是不会显示错误消息。
有人有什么建议吗?
-
AngularJS依靠输入名称来暴露验证错误。
不幸的是,到今天为止,不可能(不使用自定义指令)动态生成输入的名称。确实,检查输入文档,我们可以看到name属性仅接受字符串。
要解决“动态名称”问题,您需要创建一个内部表单:
<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>
另一种选择是为此编写一个自定义指令。