Angular form reset() doesn't sets controls to empty

Question

I'm referring to Hero guide passing the object to empty all the fields in the model like this.

this.form.reset({
  "firstName": "",
  "lastName": "bzz",
  "reporter": "" 
});

The problem is that it only sets the fields that are non-empty, i.e. bzz in the sample above. I've tried with setValue(...) but that gave the same effect. Goolearching the issue gave rather nothing other than references to the Hero examples.

I also tried to use the following. Same effect as well.

this.form.get("firstName").patchValue("");

What am I missing?

Ahem... Not sure. I'm sending in the object and it resets the form setting the fields' values as specified but only if the value specified isn't an empty string. Then it doesn't set jack and the old value that's supposed to be cleaned up, stays. — DonkeyBanana
– DonkeyBanana, Commented Nov 3, 2017 at 12:14
Can't reproduce: plnkr.co/edit/N9vjdZMdFuj5Td8M5bLG?p=preview. Post a complete minimal example reproducing the problem, as I just did. — JB Nizet
– JB Nizet, Commented Nov 3, 2017 at 12:22
@JBNizet I can't neither. I'm using custom validators with custom components. It might be something there. I'll keep digging. Or simply reload the page creating the impression that I've solved the problem, hehe. — DonkeyBanana
– DonkeyBanana, Commented Nov 3, 2017 at 15:23

Christian · Accepted Answer · 2017-11-03 13:04:52Z

2

Don't pass an object, and It will set all the form controls to null:

this.form.reset();

answered Nov 3, 2017 at 13:04

Christian

2,8613 gold badges19 silver badges25 bronze badges

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

6 Comments

DonkeyBanana Over a year ago

Two problems. One - the default values need to be set one way or another. Two - only going this.form.reset() produces a bunch of validation errors (I have custom components with custom validations). Also, awesome nick. A bit offensive to the weak-herted but to me it's beautiful. I'd love to see the recruited who asks for your SO profile, hehe. :)

Christian Over a year ago

I don't understand your problem then. You want to clear the form (like clicking on a reset button or after submitting), don't you?

DonkeyBanana Over a year ago

Yes, that's what I want to do. The problem is that due to the custom components I've designed, there's something wrong and I get errors. I didn't realize until now.

Christian Over a year ago

@DonkeyBanana, it's probably because your custom validators are expecting a certain value and since the reset() method sets their value to null, it throws an error. For example let's say your validator does some sort of validation on the length of a string: control.value.length. When it gets set to null, it'll throw an error because you can't access properties or call functions on null or undefined. Simply add this at the beginning of your validator function to make sure it actually has a value: if(!control.value) return null;

DonkeyBanana Over a year ago

I agree. On the other hand, setting an init object with actual values in the reset(blob) method seemed to generate errors too. I've tried setting blob to so many things but there are form arrays and groups and all kinds of junk, so it got complicated rather quickly. I gave up and went for a reload of the page. Ugly but effective, hehe. I'll give it another whack later, if I find time, though.

|

double-beep · Accepted Answer · 2020-05-25 04:57:48Z

0

this.form.reset({
  firstName: {value: '1', disabled: true}
})

edited May 25, 2020 at 4:57

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered May 25, 2020 at 2:49

yuanqiao

14 bronze badges

Collectives™ on Stack Overflow

Angular form reset() doesn't sets controls to empty

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related