Reset angularjs form fields with wrong ng-pattern

Question

`http://plnkr.co/edit/kAt9B3GrO8m8TT7lUHt6?p=preview`

Hey friends, can you please tell me how to reset form values in less steps instead of making each and every value null?

I have a pattern allowing alphabets and when I try to reset form, I want both input and it's error message to be gone. $setPristine only clears the form if i enter right pattern and reset but I want the wrong input like 453453 / =-=- to be gone along with its error style on reset.

Please help..

Answer 1

You can follow the angular docs example and copy over your data using a master if you want all fields reset.

If you want just the invalid field reset you would need to check each field and reset them if they are invalid.

Update your plunker.

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
  'use strict';
  $scope.master = {
    name: ""
  };
  $scope.data = angular.copy($scope.master);
  $scope.reset = function() {
    $scope.data = angular.copy($scope.master);
    $scope.form.$setPristine();
  }
});

http://plnkr.co/edit/3gFGSjA9kArzn7uNanIu?p=preview

Answer 2

I have solved this problem as follows:

var input = angular.element('#[inputId]').val(); 

in this way you can access to the values for each invalid fields and check this only if the values in the scope are undefined. In my case all scope fields are configurated previous with null value, in this way I easly recognize fields invalid with ng-pattern directive.

Example:

$scope.reset = function() {
   if($scope.formValues === undefined){
    var input1 = angular.element('#inputId1').val("");
    var input2 = angular.element('#inputId2').val("");
   }
   else{
   ...
   }
}