Angular 2 Typescript: TypeError: this.validator is not a function

Question

I\'m building a form with ControlGroup and I\'m loading a class object in it. However I\'m running into the error mentioned in the title half of the time. Some forms do load

Answer 1

I had this error when I was binding an array of values in form builder the wrong way.

What I did:

fb.group({items: [1, 2, 3, 4]})

How it should be:

fb.group({items: [[1, 2, 3, 4]]})

You have to wrap everything into an array, otherwise angular thinks that [1, 2, 3, 4] is a form control definition rather then a form control value.

Answer 2

This happened to me when I copied/pasted from a component that implemented Validator, but failed to remove the NG_VALIDATORS provider on the new component.

Answer 3

Create the form in the constructor. When Angular doesn't find the form on it's first attempt to resolve bindings then it doesn't work.

this.userDetailForm just needs to be initialized with an empty group or with a few static controls. Then when the data arrives from the server, update the group by adding/removing controls and updating values.