Question

我正在AngularJS开发一个Web应用程序。我正在动态生成一些文本框。我想对每个生成的文本框进行验证。

下面是我生成文本框的html。

<div ng-repeat="text in Textboxes">
    <input class="with-icon" type="text" name="{{text.name}}" required value="{{text.value}}"/>
</div>

以下是我的JS代码。

$scope.Textboxes = [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }];

每当我点击提交按钮，如果我没有在文本框中输入任何内容，那么我想让文本框变为红色。

可以为动态生成的文本框完成吗？

Answer 1

使用ng-model代替值
有条件地使用ng-class或ng-style（因此请查看 text.value）添加一些样式以使其变为红色
在表单中使用$invalid来检查是否所有文本字段都是是否通过文本输入验证，应用某些内容（可能已禁用）提交按钮外观或单击事件（阻止操作根据{{1}}形式）

Answer 2

使用form验证提交

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.Textboxes = [{ name: 'name1', value: 'value1' }, { name: 'name2', value: 'value2' }]

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="loginform">
 <div ng-repeat="text in Textboxes">
    <input class="with-icon" type="text" name="{{text.name}}" required value="{{text.value}}"/>
</div>
<button type="submit" >Login</button>

</form>

</div>

Answer 3

使用ng-model绑定值，然后ng-class设置/删除错误类，将边框更改为红色/黑色

我认为这就是你正在寻找的东西

Plunkr

如何对动态生成的文本框进行验证？

3 个答案: