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)

You might need to create the form in the constructor already and only update the value (or add/remove elements) when the data from the UserService arrives. — Günter Zöchbauer
@StianStandahl yes it is an import of @angular/common - angular.io/docs/ts/latest/api/common/FormBuilder-class.html — Ruben
@GünterZöchbauer Thanks! This works, only thing is that the dirty property of the userDetailForm always gives the value false, even when you changed some of the information.. — Ruben

M K M K · Accepted Answer · 2017-06-01T15:05:40

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.

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

3 Answers