0

I've followed the official Angular2 tutorial for template forms, and I'm having some issues understanding what the native reset JavaScript function does to Angular2 ngModel. While not explicitly stated in the official documentation, I believe that reset sets input values to their default, which is null?

So it seems, because in the example, we have a newHero function:

newHero() {
    this.model = new Hero(42, '', '');
}

and when we "reset" the form, this function gets called:

<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">
    New Hero (official)
</button>

Note that newHero function sets properties name and power to empty string. However, since after this function executes, we reset the form as well heroForm.reset(), the new object is as follows:

{ "id": 42, "name": null, "power": null, "alterEgo": null }

This is interesting, isn't it? Since null is NOT EQUAL to empty string (Difference between null and empty string) I could claim that this is just wrong. But it's in the official Angular2 documentation, so I'm not sure - am I not getting this right?

I changed the order in which things are called to this:

 <button type="button" class="btn btn-default" (click)="heroForm.reset(); newHero()">
    New Hero (alt)
</button>

This actually produces the correct object, which is: { "id": 42, "name": "", "power": "" }

Now imagine if there would be a default value for the new object, let's say that name changes to Jessica Alba. Angular's official example would override this value to null, so it begs the question why even have a function to reset the model?

Here's the project with 2 buttons for reset, the official and alternative one (note the model JSON at the top): https://plnkr.co/edit/1w2SSv8qxpOCjfDaJxPz?p=preview

So my question is: is the example in the documentation wrong, or am I missing something? Does the reset function actually change values to null?

Community
  • 1
  • 1
uglycode
  • 3,022
  • 6
  • 29
  • 55
  • I think you are over thinking the tutorial. The aim is to help you begin working with Angular 2. Once you are confortable with the framework you can set your object as you want. For example, assigning an id to the new object make no sense since it's the back end that generally do that and you'll probably check it before saving the data ... So to answer your question, the reset function will assign what you want to be the default value (null, empty string, predefined hero power, etc.) – mickdev Mar 21 '17 at 18:30
  • I agree with you, of course. I'm nitpicking here, but the way they represented this, the newHero function makes no sense. No matter what you'll set there, it gets overridden. I think it would make sense to change the order (firstly reset the form, then call the function). I can only imagine that this can cause some confusion. Look at me for example! – uglycode Mar 21 '17 at 18:33

1 Answers1

0

If you look through the Angular source code, you'll see that calling reset() on the NgForm instance is then calling NgForm#resetForm(value: any = undefined) which in turn calls FormGroup#reset (documented here):

Resets the FormGroup. This means by default:

  • The group and all descendants are marked pristine
  • The group and all descendants are marked untouched
  • The value of all descendants will be null or null maps

You can also reset to a specific form state by passing in a map of states that matches the structure of your form, with control names as keys.

So yes, by default calling reset() on an NgForm will reset values to null regardless of whether null really is the canonical "initial value" according to your application. But you can override this behaviour by instead calling resetForm(value) with a map of control name : initial value values.

Ben Elliott
  • 1,650
  • 14
  • 18
  • This answered my question and confirmed that the example in the official documentation makes no sense. Why call a function that sets properties if you're going to reset them immediately afterwards? Thanks! – uglycode Mar 22 '17 at 21:08