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

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

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

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设置/删除将边框更改为红色/黑色的错误类

我想这就是你要找的

普伦克