angular度清晰的子表单数据和重置validation
我想用Angular.js创build一个子窗体<div ng-form="vacancyForm">
有一种types的数据有很多领域
- 标题
- 可用date
- 价钱
所有人都requiredvalidation他们。
一旦我提交的数据，我会做我所需要的，但我想重置子窗体，以便所有的领域都不肮脏，forms是有效的，因为目前清理领域的工作，但所有领域是无效的，因为他们现在脏了，但是空着标记它们是无效的。
一个示例字段
<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??? }
使用一个<form>标签并设置name属性，然后你可以使用$scope.formName.$setPristine(); 其中formName是名称属性。 当值被改变时，元素不再是原始的。
http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine
更新
上面的答案仅适用于1.2，但在1.3angular度中引入了“已触摸”input的概念。 现在，当一个元素被模糊时，angular度会将该字段标记为已触摸。 与$setPristine类似，您可以使用$scope.formName.$setUntouched()来重新设置input。
https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched
触摸vs原始 ：感动意味着领域已经模糊，而原始意味着领域的价值已被修改。 Angular的文档指出，“将表单控件恢复到原始状态通常在将表单设置回原始状态时非常有用”。
编辑
这是一个小提琴演示： 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>
