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
– Günter Zöchbauer, Commented Jun 1, 2016 at 9:27
@StianStandahl yes it is an import of @angular/common - angular.io/docs/ts/latest/api/common/FormBuilder-class.html — Ruben
– Ruben, Commented Jun 1, 2016 at 9:32
@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
– Ruben, Commented Jun 1, 2016 at 11:57

M K · Accepted Answer · 2021-02-03 07:03:02Z

118

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.

edited Feb 3, 2021 at 7:03

answered Jun 1, 2017 at 15:05

M K

9,4567 gold badges46 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rod Manning Over a year ago

This! Works a treat, and it let's Angular manage the models itself without me having to write more code (with attending risk of this extra code getting stale/needing testing). Better way to solve it IMO.

Joe Over a year ago

Ah! Of course, if it's an array it's expecting the second value to be a validator. Would have taken me ages to track this down.

icyerasor Over a year ago

If you use an object to populate the formGroup and the entity has an Array-Property, you can wrap the arrays like this // @ts-ignore followed by entity.property= [entity.property];. And then fb.group(entity).

Emeka Elo Over a year ago

How can I upvote this answer again as it has helped me twice😅

C.M. · Accepted Answer · 2020-08-25 22:02:55Z

8

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.

answered Aug 25, 2020 at 22:02

C.M.

1,57113 silver badges17 bronze badges

1 Comment

PNS Over a year ago

This just saved me a lot of time, thank you! It is tricky as there is no interface implementation and hence no error saying the validate method is not implemented.

Günter Zöchbauer · Accepted Answer · 2016-06-01 12:01:26Z

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.

answered Jun 1, 2016 at 12:01

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Or Shalmayev · Accepted Answer · 2022-02-15 09:32:55Z

3

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

before:

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

after:

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

answered Feb 15, 2022 at 9:32

Or Shalmayev

3152 silver badges16 bronze badges

Comments

Guilherme Macedo · Accepted Answer · 2022-10-21 04:37:55Z

0

It worked in my use of array inside another array using NG VALUE ACCESSOR, but it can be confused. The error message is very bad to find a way out, it's like value.forEach is undefined or this.validator is not valid.

edited Oct 21, 2022 at 4:37

answered Oct 17, 2022 at 22:52

Guilherme Macedo

12 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Sachin Chillal · Accepted Answer · 2023-08-25 01:12:01Z

0

in my case it was

this.myForm.controls['controlName'].setValidators(""); // no validators

updated to

this.myForm.controls['controlName'].setValidators([]); // no validators
// OR
this.myForm.controls['controlName'].setValidators(Validators.required);
// OR
this.myForm.controls['controlName'].setValidators([Validators.required, Validators.minLength(8)]);

answered Aug 25, 2023 at 1:12

Sachin Chillal

5695 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related