2013-06-29 6 views
3

Допустим, у нас есть объект, как:AngularJS - проверка динамических полей ввода

$scope.company = { name: { de: '', en: '' } }; 

и поле ввода говоря:

<input type="text" ng-model="company.name[currentLanguage]" /> 
<button ng-click="currentLanguage='de'">Deutsch</button> 
<button ng-click="currentLanguage='en'">English</button> 

Если пользователь заполняет это поле, поле получает ng-valid класс. Если пользователь затем меняет язык ($ scope.currentLanguage), поле ввода корректно обновляется (становится пустым), но у него есть класс ng-valid, что неверно. Ожидаемое поведение было бы довольно ng-pristine. Как обновить это в режиме реального времени?

Было бы здорово это знать. Cheers

PS. Больше нет кода. Это все. PS2. Это еще одна проблема, которую вы предлагаете в дублированном потоке. Я не использую ng-repeat.

+0

Можете ли вы предоставить больше кода, о том, где вы настраиваете класс? –

+1

Возможный дубликат [Как проверить входы, динамически создаваемые с помощью ng-repeat, ng-show (угловой)] (http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using- ng-repeat-ng-show-angle) –

+0

нет дубликатов. Это еще одна проблема. –

ответ

2

Как только значение ввода изменяется каким-либо образом, оно не сбрасывается до ng-netist, если только вы его не нажмете.

Вы можете управлять классами в контроллере так:

$scope.currentLanguage = 'de'; 
$scope.company = { name: { de: '', en: '' } }; 

$scope.setCurrentLanguage = function(str) { 
$scope.currentLanguage = str; 
var input = angular.element(document).find('input')[0]; 
if ($scope.company.name[str] == '') { 
    angular.element(input).removeClass('ng-dirty'); 
    angular.element(input).removeClass('ng-invalid'); 
    angular.element(input).addClass('ng-pristine'); 
} else { 
    angular.element(input).removeClass('ng-pristine'); 
    angular.element(input).addClass('ng-dirty'); 
} 
} 

и в HTML:

<input type="text" ng-model="company.name[currentLanguage]" /> 
<button ng-click="setCurrentLanguage('de')">Deutsch</button> 
<button ng-click="setCurrentLanguage('en')">English</button> 
Смежные вопросы