How to properly clean form with invalid input from AngularJS controller?

Question

I have an AngularJS form that contains - among other fields - one of type url. The latter is important as this forces the corresponding input to be a valid URL.

Under certain conditions (for instance, a modal dialog with such a form is to be closed), I want to clear that form programmatically. For that purpose, I implemented method reset that basically clears the corresponding form model by setting $scope.formData = {}. Thus, it sets the form model to a new, blank object.

While that assignment clears all valid fields in the rendered HTML form, it does not clear invalid fields, like an invalid URL. For instance, if the user would provide invalid input ht://t/p as URL, that input would not be removed from the rendered form.

I think this is due to the fact that any invalid URL is not reflected by the model - such an invalid URL just wouldn't "make" it to the model because it does not pass validation in the NgModelController#$parsers array. Thus, in the model - there is no URL at all. Consequently, resetting the form model to {} cannot actually change the model's URL as it has not been set yet.

However, if method reset explicitly sets field $scope.formData.url = "", the invalid URL will be cleared properly (at least, the rendered form won't show it anymore). This is caused by the explicit change of the URL in the model. However, now, model variable formData.url contains the empty string (well, not surprisingly), while by using = {}, all fields would be undefined instead.

While assigning individual fields to "" works as workaround for simple forms, it quickly becomes cumbersome for more complex forms with many fields.

Thus, how could I programmatically reset the form efficiently and effectively - including all invalid input fields as well?

I created a Plunker at http://plnkr.co/c2Yhzs where you can examine and run a complete example showing the above effect.

The idea of "clean" form means after invoke some action - to return form to initial state (aka like after page reload). In your case $scope.formData = {} — Maxim Shoustin
– Maxim Shoustin, Commented Dec 9, 2013 at 19:16
@MaximShoustin I would like to reset both the model and the view. With $scope.formData = {}, only the model is reset. — Martin
– Martin, Commented Dec 10, 2013 at 9:36
Any news about how to solve this? I am facing also the same problem with the invalid fields. — VicM
– VicM, Commented Oct 1, 2014 at 0:38

GMK · Accepted Answer · 2015-12-04 00:14:59Z

5

Specify the type of your button as reset. That will not only call the ngClick function, it will also clear the content of the HTML form.

<button type="reset" ng-click="resetFormData()">Reset</button>

edited Dec 4, 2015 at 0:14

answered May 11, 2015 at 18:19

GMK

2,9802 gold badges22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marco Over a year ago

This works great for resetting the form completely. Unfortunately, in my case I want to reset the form (and model) to an initial state, e.g. my checkbox should be initially checked. Setting the model-value to true in the ngClick-handler is not respected by the view if I click the <button type="reset">

Valerio · Accepted Answer · 2014-02-17 21:23:36Z

2

I think this solution is moderately elegant: your plnkr reviewed
The big difference is the initialization of your model object.

I think things gets messed up when a variable becomes undefined, it doesn't get updated anymore.. it should be connected (veeeery) deeply with how validation works (docs link)

Returning undefined in that case makes the model not get updated, i think this is exactly what happens behind the curtain

PS: you can recycle resetImplicitly for all your forms in the webapp :)

answered Feb 17, 2014 at 21:23

Valerio

2,6004 gold badges26 silver badges34 bronze badges

2 Comments

Joao Polo Over a year ago

You saved my day!!! I used the explicit mode, forcing to be an empty string: $scope.filter.code = ""

Fonnae Over a year ago

I don't believe this method works w/ version 1.8.2. I changed the plnkr to that version and it no longer worked.

Cassio Cabral · Accepted Answer · 2016-02-10 20:52:50Z

1

After trying several answers without success in similar questions, this worked for me.

In my controller:

$scope.cleanForm = function() {
  $scope.myFormName.$rollbackViewValue();
};

Just call with some ng-click or any way you want.

Cheers

answered Feb 10, 2016 at 20:52

Cassio Cabral

2,6923 gold badges26 silver badges37 bronze badges

Comments

Shubham Nigam · Accepted Answer · 2015-05-22 07:02:42Z

0

The Thing is tag is of type "url" which means if user will enter specifically a valid url then only it will set values of model

If user will expicitly reset it which means setting model values to "" will again make textbox empty .

It is looking like it is setting the values but actually not ,so when you set its value to "" .Angular will set modal value to "" Lets take another example : put replace "text" with "email"

<input type="email" ng-model="formData.name" />
      <br />URL:
      <input type="url" ng-model="formData.url" />
      <br />

In above code If you will enter invalid email it will not set the values of email's model.

answered May 22, 2015 at 7:02

Shubham Nigam

3,96821 silver badges33 bronze badges

Comments

bitsprint · Accepted Answer · 2015-05-22 08:29:35Z

0

You probably need to make a copy of the model in its pristine state and set the model to pristine when you reset.

There's a good example here:

http://www.angularjshub.com/examples/forms/formreset/

answered May 22, 2015 at 8:29

bitsprint

8971 gold badge11 silver badges19 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:52:59Z

0

The url form fields are passed into the model only if they are valid. Thus in case of an invlaid-url entry in the form, the scope variable is not assigned with the model and clearing the forms entry by assigning an empty object to the model will still persist the value at the UI front.

The best alternative to this is to assign the model associated with the form data with a null. A similar answer appears here:

https://stackoverflow.com/a/18874550/5065857

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jun 30, 2015 at 14:55

ALi Mir

1811 silver badge4 bronze badges

Comments

vishnusathyanesan · Accepted Answer · 2015-05-16 10:03:11Z

-2

ng-click="formData={};"

just give like this ,

<button ng-click="formData={}">(1) Reset Full Data: formData = {}</button>

Reset your form data directly in ng-click itself.

answered May 16, 2015 at 10:03

vishnusathyanesan

2652 silver badges11 bronze badges

1 Comment

kboom Over a year ago

This isn't true. It only works for inputs which are valid. There is something like $viewValue which is different to $modelValue which you're deleting.

Collectives™ on Stack Overflow

How to properly clean form with invalid input from AngularJS controller?

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related