[英]AngularJS input form validation doesn't fire when it's model changes
我正在尝试获取一些表单输入来验证他们的模型是否/何时更新。 目前删除pristine类的唯一方法是手动输入输入框。
小提琴: http : //jsfiddle.net/TgR7A/如果你点击'切换',那么2个输入(一个总是隐藏)通过他们的模型填充内容,但表单输入保持原始状态。 我知道这是AngularJS处理表单输入的方式,但我希望有一个允许输入验证的解决方法(AKA hack!)。
HTML:
<div ng-app>
<div ng-controller="toggleCtrl">
<h1>{{ title }}</h1>
<form novalidate class="css-form" name="swtichForm">
<label>Input</label>
<input type="text" name="one" class="one" ng-show="input_show=='one'" ng-model="one" required />
<input type="text" name="two" class="two" ng-show="input_show=='two'" ng-model="two" required />
<p ng-click="toggle()">Toggle</p>
</form>
</div>
CSS:
.one {
border-color: blue;
}
.two {
border-color: yellow;
}
.css-form input.ng-invalid {
background-color: #FA787E;
}
.css-form input.ng-valid {
background-color: #78FA89;
}
.css-form input.ng-pristine {
background: #fff;
}
JS:
function toggleCtrl($scope) {
$scope.title = "Input toggle";
$scope.input_show = "one";
$scope.toggle = function () {
$scope.one = 'hello';
$scope.two = 'world';
$scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
}
}
你会在Stack Overflow上找到一个很好的解释。
不幸的是,虽然有一个$setPristine()
函数,但没有$setDirty()
函数。 正如stevuu建议的那样,解决问题的最简单方法是使用新值调用$setViewValue()
,然后使用$render()
强制视图更新:
$scope.toggle = function () {
$scope.switchForm.one.$setViewValue('hello');
$scope.switchForm.two.$setViewValue('world');
$scope.switchForm.one.$render();
$scope.switchForm.two.$render();
$scope.input_show = ($scope.input_show == 'one' ? 'two' : 'one');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.