Cannot add a new method to an Angular TypeScript class (FormGroup)

Question

I am trying to add an additional method to Angular's FormGroup class which will set the state of the group + set error state from the server.

I have the following code in a form-helper.ts file in my Angular4 app.

import { FormGroup } from '@angular/forms';

export interface FormGroup {
  setValueAndErrors(state: any, memberErrors: any);
}

FormGroup.prototype.setValueAndErrors = (state: any, memberErrors: any) => {
  this.setValue(state);
  // do some stuff with the memberErrors parameter
}

But the compiler throws an error on the FormGroup.prototype.setValueAndErrors line.

ERROR in C:/dev/AppName/AppName-Client/src/app/shared/utils/form-helper.ts (3,21): Property 'setValueAndErrors' does not exist on type 'FormGroup'.

Aside from the error you've mentioned, this is not going to be what you expect in that arrow function. — cartant
– cartant, Commented Jul 5, 2017 at 13:12
I can cross that bridge when I get to it :) For now I just want to know why this isn't compiling — Peter Morris
– Peter Morris, Commented Jul 5, 2017 at 13:15

cartant · Accepted Answer · 2017-07-05 13:27:21Z

9

The following compiles for me:

declare module "@angular/forms/src/model" {
  interface FormGroup {
    setValueAndErrors(this: FormGroup, state: any, memberErrors: any): void;
  }
}

FormGroup.prototype.setValueAndErrors = function(this: FormGroup, state: any, memberErrors: any): void {
  this.setValue(state);
}

The key seems to be using the module name that refers to the actual module/file that contains the FormGroup.

Also, you will need to address your usage of this.

answered Jul 5, 2017 at 13:27

cartant

58.6k17 gold badges169 silver badges201 bronze badges

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

4 Comments

Peter Morris Over a year ago

You are like a hero to me :)

cartant Over a year ago

No worries. Answering this has helped me solve a problem that's been bugging me all day.

Peter Morris Over a year ago

Post it as a question + answer on here, to save others the time :)

Ravindra Thorat Over a year ago

you are awesome!

Dimitri · Accepted Answer · 2023-06-08 20:29:18Z

0

This worked for the newer version of angular (I am using 13)

declare module "@angular/forms" {
  interface FormGroup {
    setValueAndErrors(this: FormGroup, state: any, memberErrors: any): void;
  }
}

FormGroup.prototype.setValueAndErrors = function(this: FormGroup, state: any, memberErrors: any): void {
  this.setValue(state);
}

answered Jun 8, 2023 at 20:29

Dimitri

711 silver badge6 bronze badges

Collectives™ on Stack Overflow

Cannot add a new method to an Angular TypeScript class (FormGroup)

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related