Angular clear subform data and reset validation

Question

I\'m trying to create a subform

with Angular.js

There is a type of data that has numerous fields

• Headl

Answer 1

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;
}

  

    

      Email
      
    
    

      Password
      
    
    

      Reset
    
  
  

    
Form Level
    
$dirty: {{ctrl.myForm.$dirty}}
    
$pristine: {{ctrl.myForm.$pristine}}
    
Input Level
    
Email Input
    
$dirty: {{ctrl.myForm.myInput.$dirty}}
    
$pristine: {{ctrl.myForm.myInput.$pristine}}
    
$touched: {{ctrl.myForm.myInput.$touched}}
    
Password Input
    
$dirty: {{ctrl.myForm.myPassword.$dirty}}
    
$pristine: {{ctrl.myForm.myPassword.$pristine}}
    
$touched: {{ctrl.myForm.myPassword.$touched}}
  
  

    
Color outlines for input
    
untouched, pristine: no outline
    
invalid, untouched, dirty: green outline
    
invalid, touched, dirty: red outline
    
invalid, touched: blue outline