gpt4 book ai didi

javascript - 如何在 angularjs 1.3 中将表单中的特定字段设置为脏

转载 作者:行者123 更新时间:2023-11-30 05:32:11 24 4
gpt4 key购买 nike

我想将特定表单的字段设置为脏,因为我正在手动更改该值。我已经去了 SO 线程 Angular.js programmatically setting a form field to dirty , 但没有运气。

这是我的问题的示例副本。 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>&nbsp;&nbsp;
<span ng-show="registrationForm.username.$dirty && registrationForm.username.$error.username">
Invalid Username.
</span>

<br>
<br>
<input type="submit" value="Submit">
</form>
</body>

</html>

在示例中,我在 5 秒后修改了用户名(仅用于示例)。同时,我想将字段设置为脏并触发验证并显示错误消息。

请帮忙。

最佳答案

迪帕克

这是带有解决方案的 plnkr http://plnkr.co/edit/69Beli?p=preview .与其直接更新 $scope.userData.username 并绕过“model to view”的解析器管道,不如使用 jQuery 更新输入字段并触发“change”事件,并使用 Angular 提供的“view to model”管道。

            $timeout(function(){
jQuery("[name=username]").val('$#deepak');
jQuery("[name=username]").trigger('change');
}, 5000);

另一个plnkr http://plnkr.co/edit/Zct92r实现了 $render。这是用于“模型到 View ”管道,在 $parser 之后调用 $render 并根据错误设置样式。

    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");
}
};

这两种解决方案都感觉像是黑客攻击,而 $render 更是如此。无论在 $render 中设置什么,都必须在 $parser 中进行补偿并撤消。

关于javascript - 如何在 angularjs 1.3 中将表单中的特定字段设置为脏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26222150/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com