question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormGroup reset() throws if a control is removed from valueChanges subscription

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/forms

Is this a regression?

not sure

Description

During OnChanges, we reset a form group. This causes the valueChanges to fire which causes a control to be remove from the group, via a subscription to the valueChanges event. The issue is that this control is still part of the form groups dictionary of named control but the value is null.

πŸ”¬ Minimal Reproduction

The below code for the reset function calls control.reset as it iterates each control. Since the control is null, there is no reset function.

  • the work around was to set the emitEvent option to false, but that causes other issues since we are listening for other valueChanges events… so we have to work around those. FormGroup.prototype.reset = function (value, options) { if (value === void 0) { value = {}; } if (options === void 0) { options = {}; } this._forEachChild(function (control, name) { control.reset(value[name], { onlySelf: true, emitEvent: options.emitEvent }); }); this.updateValueAndValidity(options); this._updatePristine(options); this._updateTouched(options); };

https://stackblitz.com/edit/angular-uiibu2

πŸ”₯ Exception or Error




TypeError: Cannot read property 'reset' of undefined

🌍 Your Environment

Angular Version:




6.1

Anything else relevant?

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
ShiftySituationcommented, Jan 31, 2019

@kara I ran into the issue again today and created a repo while it was still fresh in my mind.

https://stackblitz.com/edit/angular-uiibu2

simply type 1 in the input box and hit save. when you type 1, it will cause the value change to fire which adds another control to the form group via the subscription set up in ngOnInit. When you hit save, it resets the formGroup, causing the value change to fire again which removes the control. This creates the error, β€œTypeError: Cannot read property β€˜reset’ of undefined” since it is trying to reset each control of the formGroup even though the control has been removed.

1reaction
ShiftySituationcommented, Jan 8, 2019

I’ll test this again and provide a repro tomorrow. been on vacation for the past month πŸ˜‰

Read more comments on GitHub >

github_iconTop Results From Across the Web

how avoid to fire a valueChange after execute a form.reset?
As you can see, the first option in reset is the value , so currently you are telling the form that it should...
Read more >
FormGroup - Angular
You reset to a specific form state by passing in a map of states that matches the structure of your form, with control...
Read more >
Angular Forms Submitting & Resetting - codecraft.tv
The form now resets, all the input fields go back to their initial state and any valid , touched or dirty properties are...
Read more >
A thorough exploration of Angular Forms - InDepth.Dev
control ?.statusChanges?.subscribe() is subscribed 3 times. If you have N radio buttons, then you'll end up with NΒ ...
Read more >
Reactive Forms - setValue, patchValue And valueChanges
Prerequisites– It's mandatory to update or provide complete model structure for all fields/form controls within the FormGroup. If you miss anyΒ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found