59

I'm trying to create a subform <div ng-form="vacancyForm"> with Angular.js

There is a type of data that has numerous fields

  • Headline
  • Date available
  • Price

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???

    }

1 Answer 1

100

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>

6
  • Hmm, but why do I have to use a <form> tag.. I thought the point of ng-form directive was to use as a subform. Surely I should be able to use $scope.vacancyForm.$setPrestine()
    – markstewie
    Commented Sep 6, 2013 at 2:22
  • This definitely works though thanks. Additionally I found that this was only introduced in version Angular version 1.1.1.
    – markstewie
    Commented Sep 6, 2013 at 2:29
  • ng-form and a form tag are the same. They are noted as aliases in angular. Sorry for the confusion. Commented Sep 6, 2013 at 2:49
  • 13
    Don't forget, also, to use: $scope.formName.$setUntouched(). This clears the validation flags that depend on $touched logic. Commented Dec 15, 2014 at 1:05
  • 5
    @chovy $scope.formName.fieldName.$setPristine(); Commented Feb 12, 2015 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.