Material: Form does not revert to initial state when submitted

[axelson]

When I submit a form that I want to re-use and reset the inputs I expect 'ng-invalid-required' to no longer be set on the form. Instead it is still set and the form is shown as "red".

Here's a small screencast showing the problem:

Here's a code pen:
http://codepen.io/anon/pen/ogaROy

I'm resetting the form by resetting the model:

  $scope.reset = function() {
    $scope.user = {
      address: ''
    }
  }

However I've also tried $setPristine() and that didn't help either. Is there something I'm missing or is this a bug?

This issue is potentially related: https://github.com/angular/material/issues/931

[andreabadesso]

You can workaround it by giving a name to the form and input and setting:

$touched = false;

    <form style="padding: 20px;" ng-submit="reset()" name="addressForm">
      <md-input-container><label>Address</label>
        <input type="text"
               ng-model="user.address"
               name="address"
               required />
      </md-input-container>

  $scope.reset = function() {
    $scope.user = {};
    $scope.addressForm.address.$touched = false;
  };

[mxab]

Hey, I have the same problem,
but @andreabadesso the named property in my form does not seem to be there, so the $touched property is also not there

[erikdonohoo]

@andreabadesso the named property is based on the name property you give it. Give your form and each input in it a name, and then you can do the same thing.

[axelson]

I updated the code pen giving a name to the form and to the input and indeed setting $touched = false does work, except that it is not resetting the md-char-counter, is that a bug.

http://codepen.io/anon/pen/ogaROy

Also for some reason setting $touched = false does not work in my full environment, even though it does work in the code-pen, I'm not sure what might cause that.

[gkalpak]

Adding a little context:

By default, mdInputContainer displays its errors only if the containing input has been $touched (focused and blurred). (BTW, you can change this default behaviour, with the mdIsError attribute.)
After you submit your form, and reset/empty your model, the fields are still $touched, thus errors will be displayed.

If you want to reset the whole form (i.e. all mdInputContainers in it), you can call $setUntouched() on the formController, as shown here.

mdMaxlength's not resetting the counter to 0, is indeed a bug with mdMaxlength (which needs some love anyway).

[ThomasBurleson]

I think something like this should be added to one of our demos.
Anyone want to submit a PR for this?

[anirvann]

I have added $scope..$setPristine(); & $scope..$setUntouched();

So the input element has ng-pristine & ng-untouched. But has a ng-invalid-required!

As a work around I am using
.form-control.ng-pristine ~ .floating-label {
//my styles to make it look normal
}

[martellaj]

Using @andreabadesso's workaround, I'm able to clear errors after resetting the values in the form. However, I think calling $setPristine should be doing this without me having to explicitly set $touched to false on each input of the form.

Anyway, thanks for the workaround, @andreabadesso.

[wembernard]

Some reset function would definitely be appreciable. Don't have time to figure out why but suggested workarounds here by @andreabadesso & @gkalpak didn't work.

I tried in the console to play with either the form or the input and $touched = false, $valid = true, $invalid = false (wondering btw why those 2 exist), $setPristline(), $setUntouched()... but didn't get any positive results.

I don't have time to dig more into this but that's annoying.

angular-material#1.0.7

[garaboncias]

form.$setUntouched() is works for input field's border but not for ng-messages:
http://codepen.io/anon/pen/MyXmpN

1. focus in the address field
2. submit (it will reset the form)
   expected: ng-messages also become hidden
   actual: visible however the form field shows as a untouched (therefore valid) field

[jazdw]

Can we re-open this, its still broken in 1.1.1

[Jay0328]

I also still have this problem.
Hope to repair this.

[dnsmob]

you most likely didn't import 'angular-messages' module. i was also having the same issue, but just adding that fixed everything. have a look at this https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages. i know it's pure angular, but it works the same, no need to check $touched or any other sorcery.

[ThomasBurleson]

This issue is closed as it falls in the 'deprecated' category. We deprecate issues for one or more of the following reasons:

• Issue has a reasonable workaround
• Issue doesn't have a demo or reproducible case available
• Issue is real, but fixing it is risky for users who depend on existing behavior
• Issue is real, but only affects a very small use case
• Issue is real, but would require significant work to fix, and is less urgent than other needs.

Pull Requests are welcomed to resolve this issue. But note that not all community PRs will be merged into master. Pull Requests with large changes or large scope impacts will probably be rejected [due to stability risks to existing users].