角度驗證問題

Question

我遇到了Angular驗證類的問題。我有三個不同的圖像在我的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

它仍然是原始的，因爲原始意味着它從未有過重點。用戶沒有點擊它，因此它永遠不會變髒。如果這不是一個用戶修改的字段，pristine不是正確的用法。

此外，在輸入的ng-change中，您應該能夠使用$ 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>