I'm trying to create a subform <div ng-form="vacancyForm">
with Angular.js
There is a type of data that has numerous fields
All have required
validation on them.
Once I submit that data I'll do what I need with it but I want to reset the subform so that all the fields are not dirty and the form is valid as at the moment clearing out the fields work but all fields are invalid as they are now dirty, but empty marking them as invalid.
An example field
<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>
Here is the function that is called when submitted
$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???
}
date = new Date(); // this clears out all the fields and makes them all invalid // as they are empty.
In a model-driven form to reset the form we just need to call the function reset() on our myform model. The form now resets, all the input fields go back to their initial state and any valid , touched or dirty properties are also reset to their starting values.
ng-pristine: The ng-pristine class tells that the form has not been modified by the user. This returns true if the form has not been modified by the user. Return type: Return Boolean True if the form/input field is not modified by the user else it returns False.
A validator is a function that processes a FormControl or collection of controls and returns an error map or null. A null map means that validation has passed.
Set the name
attribute on the subform and then you can $scope.formName.$setPristine();
where formName
is what the name attribute is. An element is no longer pristine when the value has been changed.
http://docs.angularjs.org/api/ng.directive:form.FormController#$setPristine
Update
The above answer was solely for 1.2, but in 1.3 angular introduced the concept of a "touched" input. Now when an element is blurred angular will mark the field as touched. Similar to $setPristine
, you can set the input back by using $scope.formName.$setUntouched()
.
https://docs.angularjs.org/api/ng/type/form.FormController#$setUntouched
touched vs pristine: touched means the field has been blurred while pristine means the field's value has been modified. Angular's docs note that "Setting a form controls back to their untouched state is often useful when setting the form back to its pristine state."
Edit
Here is a fiddle demo: 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With