如何驗(yàn)證使用ng-repeat，ng-show（angular）動態(tài)創(chuàng)建的輸入我有一個使用ng-repeat創(chuàng)建的表。我想為表中的每個元素添加驗(yàn)證。問題是每個輸入單元格與其上方和下方的單元格具有相同的名稱。我試圖使用該{{$index}}值來命名輸入，但盡管HTML中的字符串文字顯示正確，但它現(xiàn)在正在工作。這是我現(xiàn)在的代碼：<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>我已經(jīng)嘗試刪除{{}}from索引，但這也不起作用。截至目前，輸入的驗(yàn)證屬性工作正常，但不顯示錯誤消息。有人有什么建議嗎？編輯：除了下面的好答案，這里有一篇博客文章更詳細(xì)地介紹了這個問題：http：//www.thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 /
3 回答
不負(fù)相思意
TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超10個贊
自從問到這個問題以來，Angular團(tuán)隊(duì)已經(jīng)通過動態(tài)創(chuàng)建輸入名稱來解決了這個問題。
使用Angular 1.3及更高版本，您現(xiàn)在可以執(zhí)行以下操作：
<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，這是一種更強(qiáng)大的表單驗(yàn)證工具。您可以使用與ngMessages相同的技術(shù)：
<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>添加回答
舉報(bào)
0/150
提交
取消