角度验证问题

时间:2015-04-07 08:03:08

标签: angularjs validation

我的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/

1 个答案:

答案 0 :(得分:0)

它仍然质朴,因为原始意味着它从未有过焦点。用户没有点击它,因此它永远不会变脏。如果这不是用户修改的字段,那么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>