![](/img/trans.png)
[英]Validate row with inputs in a table that has been built dynamically in AngularJS
[英]Validate inputs in table row with angular
我使用这个lib在页面上创建表。
可以编辑此表中的每一行。 因此,如果启用了editMode,则会在行的每一列显示输入。 其中一些输入是必需的。 如果必填字段为空,我想显示红色文本“必填”或只显示红色边框。 但是问题 - 当我使用表单时它很简单。 但就我而言,我不能使用表格。
这个答案对我不利,因为每一行都必须有唯一的表单名称才能正确验证。
示例: https : //jsfiddle.net/r8d1uq0L/147/
<div ng-repeat="user in users">
<div name="myform-{{user.name}}" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
<span class="error" ng-show="myform.field.$error.required">Too long!</span>
</div>
</div>
<div>
<button ng-click="add()">
Add
</button>
</div>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.users = [{name:"1"}, {name:"2"}];
$scope.add = function(){
$scope.users.push({});
}
});
无需创建动态表单名称,因为ng-repeat
在浏览器上绘制模板时会在每次迭代时创建新的子范围。 所以只需将name命名为name="innerForm"
并使用innerForm.field.$error.required
对其进行验证。
<div ng-repeat="user in users">
<div name="innerForm" ng-form>
<input type="text" ng-model='user.name' required name="field"/>
{{myform[$index]}}
<span class="error" ng-show="innerForm.field.$error.required">Too long!</span>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.