Как сделать валидацию для динамически генерируемых текстовых полей?

114
10

Я разрабатываю веб-приложение в AngularJS. Я генерирую несколько текстовых полей динамически. Я хочу сделать валидацию для каждого из сгенерированных текстовых полей.

Ниже мой 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' }];

Всякий раз, когда я нажимаю кнопку отправки, если я ничего не вводил в текстовые поля, я хочу сделать текстовые поля красными.

Можно ли это сделать для динамически генерируемых текстовых полей?

спросил(а) 2017-07-20T12:10:00+03:00 3 года, 3 месяца назад
1
Решение
59

использовать 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>

ответил(а) 2017-07-20T12:19:00+03:00 3 года, 3 месяца назад
57

Используйте ng-model вместо значения используйте ng-class или ng-style для условного (следовательно, проверьте с помощью text.value) добавьте некоторый стиль, чтобы сделать его красным используйте $invalid в форме для проверки того, проверено ли все текстовое поле с текстовым вводом или нет, примените что-то (может быть отключено), чтобы отправить кнопку в виде кнопки или в событии клика (запретите действие в соответствии с $invalid в форме)

ответил(а) 2017-07-20T12:16:00+03:00 3 года, 3 месяца назад
42

Используйте ng-model для привязки значений, а затем ng-class для установки/удаления класса ошибки, который изменяет границу на красный/черный

Я думаю, это то, что вы ищете

Plunkr

ответил(а) 2017-07-20T12:57:00+03:00 3 года, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема