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 and some don't.

I have a class file like so:

export class User {
    id: number;
    email: string;
    sign_in_count: number;
    created_at: string;
    first_name: string;
    last_name: string;
    birth_date: Date;
    news_letter: boolean;
    fb_id: string;
    gender: boolean;
    phone: string;
    picture: any;
}

In my UserDetailComponent I load the class in the control like this:

export class UserDetailComponent implements OnInit {
    user: User;
    userDetailForm: ControlGroup;

    constructor(
        private form: FormBuilder,
        private _userService: UserService,
        private _router: Router,
        private params: RouteSegment
    ) { }
    ngOnInit() {
        this.user = this._userService.getUser();
        if (this.user === undefined) {
            this._userService.getSingleUser(this.params.getParam('id'))
                .subscribe(data => (this.user = data, this.setForm()));
        } else {
            this.setForm();
        }
    }

    setForm() {
        this.userDetailForm = this.form.group(this.user);
    }
}

On that last line I get the error of which the stacktrace is below:

browser_adapter.ts:78 TypeError: this.validator is not a function
    at Control.AbstractControl._runValidator (model.ts:146)
    at Control.AbstractControl.updateValueAndValidity (model.ts:128)
    at new Control (model.ts:282)
    at FormBuilder.control (form_builder.ts:32)
    at FormBuilder._createControl (form_builder.ts:66)
    at eval (form_builder.ts:50)
    at Function.StringMapWrapper.forEach (collection.ts:132)
    at FormBuilder._reduceControls (form_builder.ts:49)
    at FormBuilder.group (form_builder.ts:19)
    at UserDetailComponent.setForm (user-detail.component.ts:95)

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 than a form control value.

Answer 2

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.

Answer 3

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 4

for me the problem was that i wrote formControl instead of formControlName

before:

<input
type="number"
[formControl]="test"
>

after:

<input
type="number"
[formControlName]="test"
>