Not able to reset the invalid values in forms by deleting the model

[mikn]

If you leave values that does not pass validation, it seems that the values are not pushed to the model. Issue: #1412
The extension of this problem is that if you delete the model, the input fields containing the invalid values will not be cleared because the field and model are now decoupled and won't be reattached before it contains a valid value again/is emptied as far as I can tell.

With the email field, it seems that it works if you set the model to an empty string, but you cannot do that with a numbers field (aka. you cannot return the numbers field through the model to an empty state from an invalid value).

Another side effect this has is that the form is flagged as pristine until a valid value is entered in the numbers field... This is not the behaviour of the email field though, so it might be another issue entirely.

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[angadsalaria]

This issue still persists.
Take the 'Simple Form' example on angularjs docs for example: https://docs.angularjs.org/guide/forms
If you enter an invalid email address and reset the form (reset the underlying model), the input field does not reset. It retains the invalid entry.

[rjurado01]

@angadsalaria +1

[Narretz]

@angadsalaria
This is not really a bug, it's more the way ngModel works. When an input is invalid, it's by default not set on the model. So if you type "email" into the email input, the model is undefined. When you reset the model, it's still undefined, so no change is detected, and the input value is not updated. We probably need a method on the form / input level that clears the input

[orifzunnunov]

The simplest work around will be to clear out email input field data from the DOM (I know it's not AngularJS way or 'anti-pattern'):

jQuery("input[type='email']").val("");

[angadsalaria]

@Narretz
Its a little unintuitive for a developer using a framework when the framework works that way. In this particular case, a 'reset' on a form implies a certain meaning but the framework does not fulfill it. And so while ngModel might work a certain way, knowing that ng-model directive is strongly associated with input form elements, I think this should be a facility provided by the framework that if an underlying model is rendered undefined as part of the reset action, the corresponding input form element should reset regardless.

[fabriciokoch]

I have the same problem.
If this is the "angular way", wouldn't it be nice to have a better way to clear all form inputs (@Narretz suggestion)?
Without this method, I need to set null to each model property in the form.

[loic]

👍 since there are $setUntouched and $setPristine methods meant to reset the form state to allow reusing it, it's a glaring omission not to have a method to reset the views values.

[shedokan]

Someone in a different issue(#3885) mentioned setting the value to '', but it only works once, to work around that I did this:

form_values.my_value = null;

// Delete it after the $digest cycle
// So that next time it sees it clean again
$timeout(function(){
    delete form_values.my_value;
}, 0, false)

[zhaocnus]

Here is a another way if you have a lot of inputs in the form and you don't want to reset them one by one:

  angular.module('myApp')
    .controller('FormController', function($scope) {
      $scope.model = {};

      $scope.reset = function() {
        $scope.myForm.$setPristine();

        angular.forEach($scope.myForm, (value, key) => {
          // filter out angular properties
          if (key.indexOf('$') === 0) {
            return;
          }

          // This clears the invalid/valid inputs
          $scope.model[key] = null;
        });
      };
    });

[mpellerin42]

agree with @loic using angular 1.5.9 now and I spent the last hour struggling to find a way to reset invalid fields of my form!
@btford you asked for a discussion if the issue persisted, 3 years later the discussion is going on but there are no inputs from any contributors... Don't you think that issue worth an official fix?

[mpellerin42]

Finally, the real good solution is to update directly the model, but in deep with empty strings to be sure that all the fields will be updated.

[ViswanadhamK]

use ng-model-options="{ allowInvalid: true}" instead of clear all form fileds .
If you have a more fileds with complex model or some fields have default values then it is difficult to clear all.

Below is the working solution for reset form with invalid form data.

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm" ng-model-options="{ allowInvalid: true}">
        <div>
            <label for="email">Email</label>
            <input name="myInput" type="email" ng-model="myModel.email" required></div>
        <div>
            <label for="password">Password</label>
            <input name="myPassword" type="password" minlength="8" ng-model="myModel.password" required></div>
        <div>
            <button ng-click="reset()" type="button">Reset</button>
        </div>
    </form>
    <div>
        <h4>Form Level</h4>
        <div>$dirty: {{myForm.$dirty}}</div>
        <div>$pristine: {{myForm.$pristine}}</div>
        <div>Model: {{myModel}}</div>
    </div>
</div>

angular.module('myApp', [])
	.controller('myCtrl', function($scope){
        $scope.myModel={};
        
        $scope.reset = function(){
            
            // Reset the form state
            $scope.myForm.$setPristine();
            $scope.myForm.$setUntouched();
            
        
            $scope.myModel={};
        }
    });

[deeppatidar]

@ViswanadhamK I am using the same form as you mentioned but after reset UI still showing the value which I filled wrong.
I tried email field to set null in user object in reset function that works but now form is getting submit with dirty value, if I am going with this then I have to check on submit that user object shouldn't have value like this user = {email : null}
Is there any other way to resolve this.

[ViswanadhamK]

@deeppatidar Could you please send your code.

[xc1427]

I have an idea.

You can wrap the inputs in a <ng-if="someBoolean">, and toggle the value of someBoolean 2 times.
<ng-if> will do re-compilation and effectively reset the $viewValue according to the model.

[yanickrochon]

Just ran into this issue. I have a model that's being reset, which makes the input model become undefined, but the input value does not change!! How can I have the input value be empty when the model is undefined?