Issue with TypeScript compilation in Angular2 Forms

Question

I have defined a form in Angular2 like that:

    this.form = this._formBuilder.group({
        password: ['',Validators.required],
        passwordRepeat: ['',Validators.required]
    });

where

public form:ControlGroup

Which is fine, as:

 _formBuilder = FormBuilder.group(controlsConfig: {
        [key: string]: any;
    }, extra?: {
        [key: string]: any;
    }): modelModule.ControlGroup

it returns ControlGroup.

Now, in my component I am using:

this.user.password = this.passwordEditForm.controls.password.value;

Which throws me compilation error of:

error TS2339: Property 'password' does not exist on type '{ [key: string]: AbstractControl; }'.

Seems like a bug. Any ideas on how I can overcome this issue? I've tried doing so:

export interface FormControlGroup extends ControlGroup{
password:any;
}

But this gives me even more errors:

error TS1206: Decorators are not valid here.
app/form.component.ts(30,9): error TS2322: Type 'ControlGroup' is not assignable to type 'FormControlGroup'.
  Property 'password' is missing in type 'ControlGroup'.
app/form.component.ts(37,61): error TS2339: Property 'password' does not exist on type '{ [key: string]: AbstractControl; }'.

Which version of Angular2 do you use?

Thierry Templier
– Thierry Templier

2016-03-14 13:22:36 +00:00
Commented Mar 14, 2016 at 13:22 — Thierry Templier
– Thierry Templier, Commented Mar 14, 2016 at 13:22
angular 2 2.0.0-beta.8

uksz
– uksz

2016-03-14 13:32:26 +00:00
Commented Mar 14, 2016 at 13:32 — uksz
– uksz, Commented Mar 14, 2016 at 13:32

Tunaki · Accepted Answer · 2016-06-11 10:49:34Z

9

replace the following :

this.user.password = this.passwordEditForm.controls.password.value;

with

this.user.password = this.passwordEditForm.controls['password'].value;

It works for me. I thinks it's only a workaround.

edited Jun 11, 2016 at 10:49

Tunaki

138k46 gold badges370 silver badges443 bronze badges

answered Jun 11, 2016 at 10:46

Erhard Karger

1011 silver badge5 bronze badges

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

2 Comments

webdevinci Over a year ago

Worked here as well, can check off answer. Thanks dude

smartmouse Over a year ago

Ok, this is a workaroud. What is the solution to these errors?

Collectives™ on Stack Overflow

Issue with TypeScript compilation in Angular2 Forms

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related