我正在尝试创建一个子表单<div ng-form="vacancyForm">
使用 Angular.js
有一种数据有很多字段
都有required
对他们进行验证。
一旦我提交了该数据,我将对其进行所需的操作,但我想重置子表单,以便所有字段都不脏,并且表单在清除字段工作时有效,但所有字段都无效,因为它们现在是脏的,但是空的,将它们标记为无效。
示例字段
<div class="control-group" ng-class="getErrorClasses(vacancyForm.headline)">
<label class="control-label" for="headline">Headline</label>
<div class="controls">
<input type="text" class="input-xlarge" id="headline" name="headline" required ng-model="new_vacancy.headline">
<span class="help-inline" ng-show="showError(vacancyForm.headline, 'required')">This field is required</span>
</div>
</div>
这是提交时调用的函数
$scope.addVacancy = function(){
// save the submitted data
$scope.school.vacancies.push($scope.new_vacancy);
// now clear it out
$scope.new_vacancy = {};
$scope.new_vacancy.date = new Date();
// this clears out all the fields and makes them all invalid
// as they are empty. how to reset the form???
}
Set the name
子表单上的属性,然后您可以$scope.formName.$setPristine();
where formName
name 属性是什么。当值改变时,元素不再是原始的。
http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine http://docs.angularjs.org/api/ng.directive:form.FormController#%24setPristine
Update
上面的答案仅适用于 1.2,但在 1.3 中,Angular 引入了“触摸”输入的概念。现在,当元素模糊时,角度会将字段标记为已触摸。如同$setPristine
,您可以使用设置回输入$scope.formName.$setUntouched()
.
https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched https://docs.angularjs.org/api/ng/type/form.FormController#%24setUntouched
感动与原始:touched 表示该字段已模糊,而 pristine 表示该字段的值已被修改。 Angular 的文档指出,“当将表单设置回其原始状态时,将表单控件设置回其未触及的状态通常很有用。”
Edit
这是一个小提琴演示:https://jsfiddle.net/TheSharpieOne/a30kdtmo/ https://jsfiddle.net/TheSharpieOne/a30kdtmo/
angular.module('myApp', [])
.controller('myCtrl', myCtrl);
function myCtrl() {
var vm = this;
vm.reset = function() {
vm.myForm.$setPristine();
vm.myForm.$setUntouched();
vm.email = vm.password = '';
}
}
.ng-invalid.ng-touched {
outline: 2px solid blue;
}
.ng-invalid.ng-dirty {
outline: 2px solid red;
}
.ng-invalid.ng-dirty.ng-untouched {
outline: 2px solid green;
}
form,
form div {
padding: 5px 10px;
}
h3,
h4 {
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as ctrl">
<form name="ctrl.myForm">
<div>
<label for="email">Email</label>
<input name="myInput" type="email" ng-model="ctrl.email" id="email" required>
</div>
<div>
<label for="password">Password</label>
<input name="myPassword" type="password" minlength="8" ng-model="ctrl.password" id="password" required>
</div>
<div>
<button ng-click="ctrl.reset()" type="button">Reset</button>
</div>
</form>
<div>
<h4>Form Level</h4>
<div>$dirty: {{ctrl.myForm.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.$pristine}}</div>
<h4>Input Level</h4>
<h5>Email Input</h5>
<div>$dirty: {{ctrl.myForm.myInput.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.myInput.$pristine}}</div>
<div>$touched: {{ctrl.myForm.myInput.$touched}}</div>
<h5>Password Input</h5>
<div>$dirty: {{ctrl.myForm.myPassword.$dirty}}</div>
<div>$pristine: {{ctrl.myForm.myPassword.$pristine}}</div>
<div>$touched: {{ctrl.myForm.myPassword.$touched}}</div>
</div>
<div>
<h3>Color outlines for input</h3>
<div title="The form loads this way, it can still be invalid since required fields are empty to start with">untouched, pristine: no outline</div>
<div title="Such as in the middle of typing a valid email for the first time">invalid, untouched, dirty: green outline</div>
<div title="blurred with invalid input">invalid, touched, dirty: red outline</div>
<div title="focued and blurred without typing">invalid, touched: blue outline</div>
</div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)