我有一个表单字段，当用户在表单字段中键入时，我想针对休息 api 进行验证。有点像自动完成，而是自动验证。我已经开始以 Angular 的形式编写一些代码，但不确定如何观察 angular 的输入 onchange 或如何设置事物的 inavlid 属性。
这是我到目前为止所拥有的
app.directive('purchaseCode', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (CODE_REGEXP.test(viewValue)) {
//how do I get the $http context/scope to to an ajax request here?
$http.get('check/user.code').success(function(data) {
ctrl.$setValidity('purchase_code', data.is_valid);
});
return viewValue;
} else {
ctrl.$setValidity('purchase_code', false);
return undefined;
}
});
}
};
});
function Controller($scope, $routeParams, $http) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.master);
};
$scope.reset();
}
和 HTML
<div class="container" ng-app>
<form no-validate id="myform" name='form' action="/upload" method="POST" role="form" ng-controller="Controller">
<div class="form-group has-error">
<label class="control-label" for="purchase_code">Purchase code</label>
<input type="text" class="form-control" id="purchase_code" placeholder="purchase code"
ng-model="user.code"
purchase-code
name="code">
</div>
<button type="submit" class="btn btn-block btn-primary" ng-click="update(user)"
ng-disabled="form.$invalid || isUnchanged(user)">Submit</button>
</form>
</div>
我该怎么做才能让它观察表单字段发生变化的事件。还有一个额外的问题：我如何防止它显示无效/脏状态，直到它的长度超过 3 个字符？
我尝试查看http://docs.angularjs.org/guide/forms上的自定义验证器示例，但如果您逐字复制并粘贴他们的代码，它似乎不起作用。