如何在形式设置的特定字段脏的angularjs 1.3 [英] How to set a particular field in a form to dirty in angularjs 1.3
问题描述
我想设置一个特殊形式为脏场，因为我手动改变这种value.I已经走了的SO线程<一个href=\"http://stackoverflow.com/questions/18071648/angular-js-programmatically-setting-a-form-field-to-dirty\">Angular.js以编程方式设置表单域脏，但没有运气。
I want to set a field of a particular form as dirty as I am manually changing that value.I have already gone the the SO thread Angular.js programmatically setting a form field to dirty , But no luck.
下面是我的问题的样本副本。
普拉克
Here is the sample replica of my issue. Plunk
<html ng-app="sampleApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0- rc.4/angular.min.js"></script>
<style type="text/css">
input.ng-invalid {
border: 1px solid red;
}
input.ng-valid {
border: 1px solid green;
}
input.ng-pristine {
border-color: #FFFF00;
}
</style>
<script type="text/javascript">
var sampleApp = angular.module("sampleApp", []);
sampleApp.controller('sampleCtrl', ['$scope', '$http', '$timeout',
function($scope, $http, $timeout) {
$scope.userData = {
username: "",
};
$timeout(function() {
$scope.userData.username = '$#deepak';
}, 5000);
}
]);
sampleApp.directive('myUsername', [
function() {
// Runs during compile
return {
require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent
link: function($scope, iElm, iAttrs, controller) {
controller.$parsers.unshift(function(value) {
//allow only alphanumeric characters
var reg = /^\w+$/;
var isValidUsername = reg.test(value);
controller.$setValidity('username', isValidUsername);
return isValidUsername ? value : undefined;
});
controller.$formatters.unshift(function(value) {
var reg = /^\w+$/;
var isValidUsername = reg.test(value);
controller.$setValidity('username', isValidUsername);
$scop e.registrationForm.username.$setViewValue($scope.registrationForm.username.$viewValue);
return value;
})
}
};
}
]);
</script>
</head>
<body ng-controller="sampleCtrl">
<div ng-show="bShowStatus">
{{message}}
<ul ng-repeat="err in errors">
{{err}}
</ul>
</div>
<form name="registrationForm" ng-submit="submitForm()" novalidate>
UserName
<br>
<input type="text" name="username" ng-model="userData.username" ng-model-options="{updateOn: 'blur'}" my-username>
<span ng-show="registrationForm.username.$dirty && registrationForm.username.$error.username">
Invalid Username.
</span>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
在样品我5秒（仅用于本例）完成后，修改用户名。与此同时，我要设置字段为脏和火验证并显示错误消息。
In the sample I am modifying the username after 5 second (only for the example). At the same time , I want to set the field as dirty and fire the validation and show the error message.
请帮忙。
推荐答案
迪帕克
下面是与溶液中的plnkr http://plnkr.co/edit/ 69Beli？p = preVIEW 。而不是直接更新$ scope.userData.username和绕过模式查看的解析器管道，使用jQuery更新输入字段并触发'变'事件，并使用视图模式由角提供管道。
Here is the plnkr with the solution http://plnkr.co/edit/69Beli?p=preview. Instead of updating the $scope.userData.username directly and bypassing the parser pipeline of 'model to view', use jQuery to update the input field and trigger the 'change' event and use the 'view to model' pipeline provided by Angular.
$timeout(function(){
jQuery("[name=username]").val('$#deepak');
jQuery("[name=username]").trigger('change');
}, 5000);
另一个plnkr http://plnkr.co/edit/Zct92r 以$渲染来实现。这是关于'模型，以查看'管道，$呈现$分析器以及基于错误的样式之后被调用。
Another plnkr http://plnkr.co/edit/Zct92r with $render implemented. This is for 'model to view' pipeline, $render is invoked after $parser and setting the styles based on errors.
controller.$render = function() {
console.log('in render');
iAttrs.$set('value', controller.$viewValue);
if (controller.$invalid && controller.$viewValue.length !== 0) {
iElm.css("border", "1px solid red");
} else if (controller.$viewValue.length === 0) {
iElm.css("border", "1px solid gold");
} else {
iElm.css("border", "1px solid green");
}
};
这两种解决方案，感觉就像一个黑客和$渲染感觉更如此。无论坐落在$渲染，在$解析器和百废待兴的补偿。
Both solution feels like a hack and $render feels more so. Whatever is set in $render, has to be compensated in $parser and undone.
这篇关于如何在形式设置的特定字段脏的angularjs 1.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
