Угловая проверка вопроса

Question

У меня проблема с классами Угловой проверки. У меня есть три класса в моем CSS с тремя разными изображениями, которые показывают, требуется ли поле, если пользователь правильно заполнил или нет. Например. У меня есть одно поле ввода, в котором пользователь вводит персональный номер, и я просматриваю его в службе и заполняет модель с именем, именем, адресом и т. Д., Которое также заполняет поля ввода.

Я сделал простой пример

HTML

<div ng-app="ebu" ng-controller="search"> 
<button id="search-apparentice" ng-click="addName()">Search apprentice</button> 
<hr>  
<input id="username" type="text" ng-model="user.name" required> 
</div> 

JS

angular.module('ebu', []). 
controller('search', function($scope) { 
$scope.user = {}; 
$scope.addName = function() 
{ 
$scope.user.name = "Kasper"; 
} 
}) 

CSS

input[required].ng-invalid 
{ 
    border: 1px solid red; 
} 


input[required].ng-valid 
{ 
    border: 1px solid green; 
} 

input[required].ng-pristine 
{ 
    border: 1px solid blue; 
} 

[FiddleJS] [1] [1]: http://jsfiddle.net/kaspergantzhorn/z1wg6tko/9/

Answer 1

Это все еще нетронутый, потому что нетронутый означает, что у него никогда не было фокуса. Пользователь не нажимает на него, поэтому он никогда не загрязняется. Если это не модифицированное пользователем поле, то нет ничего подходящего для использования.

Кроме того, в ng-изменении ввода вы сможете использовать $ setDirty.

<input type="text" ng-change="formName.inputName.$setDirty()" /> 

Для вас код выше:

<div ng-app="ebu" ng-controller="search"> 
<button id="search-apparentice" ng-click="addName(); myForm.name.$setDirty()">Search apprentice</button> 
<hr> 
<form name="myForm"> 
<input name="name" id="username" type="text" ng-model="user.name" required> 
</form> 
</div>