angular: Getting "control.registerOnChange is not a function" after changing form

I’m submitting a … (check one with “x”)

[ x ] bug report => search github for a similar issue or PR before submitting
[   ] feature request
[   ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

After patching a form of type FormArray (form.patchValue(myArray);) with FormGroup items, [formGroup]='form' in my html throws control.registerOnChange is not a function. I patch it when I initialize my app and everything works fine but when I change the form with another FormArray (I tried with the same array), I’m getting this error. After further investigation (and hours trying to understand what was going on), it seems that the error comes from line 1634 of forms.umd.js when it does control.registerOnChange(function (newValue, emitModelEvent) {.

When it works, control (of control.registerOnChange) is of form FormControl while when it fails, it is of form FormGroup. The problem is that my FormArray is somewhat deep and the first time I patch it, it goes at the leaf of the branches to reach FormControl while the second time it goes to the first branch which in my case is a FormGroup.

The problem is that I don’t know why it doesn’t go to the leaf the second time. I use the same functions and methodology to patch the values and the FormArray looks exactly the same in both cases!

Expected behavior

It should not throw any error…

Minimal reproduction of the problem with instructions

I couldn’t make a minimal demo but would definitely share the functions I use to create the form if needed.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

NodeJS 7.4.0 running on Windows 10

  • Angular version: 2.4.7

  • Browser: Chrome 55 64bit

  • Language: Typescript

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 9
  • Comments: 38 (7 by maintainers)

Commits related to this issue

Most upvoted comments

This should have been fixed a long time ago 😦

I understand angular’s team has a lot to do but this is almost a one year old bug and I’m still having lots of troubles with it…

+25
natcohen on Oct 27, 2017

Almost 3 years and not a word from the Angular team!

It is a shame that the Angular community spends time to find bugs and work on solutions but the team doesn’t pay attention to that! What should I do to get it fixed in the next release?

I am currently working on a new project and have moved to React… I love Angular but if we can’t get the support we need after 3 years, it makes it unusable!

+19
natcohen on Nov 21, 2019

Any news on this?

+17
jotatoledo on Jan 26, 2018

@natcohen , naturally, you have to find a workaround to your issue. What about those two suggestions:

https://github.com/angular/angular/issues/13788#issuecomment-272398272 https://github.com/angular/angular/issues/13788#issuecomment-274014852

+14
ghost on Apr 4, 2017

@DzmitryShylovich and @kara please help with this bug… 3 months and still nothing for a blocking bug!

+13
natcohen on Apr 4, 2017

@kara @matsko @vicb and @DzmitryShylovich any chance one of you can have a look before the end of the year (Xmas gift 😃? It shouldn’t take that long to fix, a solution has already been proposed…

+10
natcohen on Dec 4, 2017

I take it this is still broken? Do something like this will not work…

...
   <div class="col__" [formGroupName]="i" *ngFor="let tagAndCatControl of groupControl.controls.categoriesAndTags.controls; let i = index;">
                    <my-input [formControl]="tagAndCatControl"></my-input>

EDIT: Turns out i was passing in a FormGroup and not a FormControl

+9
raysuelzer on May 10, 2018

@AndrewKushnir thank you for finally adding the fix to the official release…but I must say that you guys lost me! Angular is awesome and the concept is fantastic.

Unfortunately if it takes 4 years to merge a fix (to an identified bug) proposed by a user, the project is not worth to be used by production products. I had to move away from this amazing tech because I couldn’t afford to struggle with such issues. You lost a user on this and you probably lost a dozen of potential ones due to the bad press I gave to my dev friends.

Sorry if this post sounds inappropriate but… gosh…4 years???

+7
natcohen on Feb 14, 2021

****

+3
ranglang on Nov 23, 2017

In my Angular app my form works correctly but I get these "control.registerOnChange is not a function" errors every time I update the form. I use ngxsForm so I assume that’s the reason I can use the form at all, even though Angular doesn’t like the dynamic updating.

My structure is:

form = new FormGroup({
  features: new FormArray([]),
}

and then the features FormArray gets dynamically filled with FormGroups each containing a value FormControl where I save my actual values.

+2
martinsotirov on Oct 7, 2020

This fix works https://github.com/ghetolay/angular/commit/535147d5a1261a281b54d9be4a7de65562d8d664 and the PR https://github.com/angular/angular/pull/15812

But nobody wants to merge it 😦

+2
natcohen on Sep 28, 2017

#MeToo

+2
jeffgrady on Sep 14, 2017

I have the same problem, I need to add dynamically checkboxes to a form: I have tried with formArray but when I add a groupForm to the formArray it breaks. I think there is a bug. Could someone show how it’s supposed to be done: https://plnkr.co/edit/Ark5W6bog6BX4yV9ONEd?p=preview

+2
Bretto on Jan 19, 2017

Thanks @AndrewKushnir . I’m gonna test the fix later today. We are launching our app this week so the fix surely won’t make the release version but hopefully I can remove the nasty workarounds that I have in place after the launch.

+1
martinsotirov on Feb 15, 2021

Hi, just want to give an update: we were able to reproduce the issue and I’ve created a draft PR #40829 with the proposed fix (similar to the fix proposed by @natcohen in PR #27246, thanks @natcohen!). The fix will need to go through the regular code review and testing procedures, but I’d like to ask if anyone who is experiencing this issue could try the fix on their apps and provide some feedback too.

The “@angular/forms” package (with the fix included) is available at:

https://918438-24195339-gh.circle-artifacts.com/0/angular/forms-pr40829-07bab94bf1.tgz

so you could test it by updating your package.json file like this:

  ...
  "@angular/forms": "https://918438-24195339-gh.circle-artifacts.com/0/angular/forms-pr40829-07bab94bf1.tgz",
  ...

and running npm install (more info is available in DEVELOPERS.md).

Important note: the package is not suitable for production use and will be available for a short period of time.

Thank you.

+1
AndrewKushnir on Feb 13, 2021

https://plnkr.co/edit/PJHbJBYGD74cfPIruAzQ?p=preview @Bretto this will work

+1
dejour on Jan 20, 2017

I added a new form group in the second place in changed template, which is the same index with inital control’s index. then it works. https://plnkr.co/edit/lqxzPaYAc2iK4uKrvkRO?p=preview @DzmitryShylovich @kara

+1
dejour on Jan 13, 2017
Read more comments on GitHub
← angular: getInertBodyElement returns null, crashing in _sanitizeHtml
angular: getUserMedia and RTCPeerConnection gives problems in iOS 11.2.5 on Safari →