如何驗證動態生成的文本框？

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設置/刪除將邊框更改為紅色/黑色的錯誤類

我想這就是你要找的

普倫克