Typescript Set Value of Class itself in Method, Inheritance from Base Class

Question

How do I set a value of a class itself in its own method? Trying to utilize this. Receiving an error below .

export class ProductForm extends FormGroup {

    constructor(){
      super({
        productName: new FormControl()
      })
    }
   
    addMoreFieldsTest(): void {
      this = {
        productName: new FormControl(),
        productDescription: new FormControl()
     }
}

Error: The left-hand side of an assignment expression must be a variable or a property access.

I could use AddControl method, however want to set class itself for learning purposes.

What you're asking for doesn't really make sense. [What problem are you actually trying to solve](https://xyproblem.info/) by doing this? — kaya3, Mar 01 '21 at 00:54
I want to be able to change the value of class itself, and extend in other cases, this is for business sample — , Mar 01 '21 at 00:57
You cannot do that, as the error message explains. Why do you think you need to do that? — kaya3, Mar 01 '21 at 00:57

Mikkel Christensen · Accepted Answer · 2021-03-01T08:19:57.617

Updated Answer

The controls of a FormControl do not reside directly on the FormGroup class but inside of a property on the class named controls

Therefore, if you merely wish to add to the controls on the extending class you simply need to manipulate the controls property.

    export class ExtendedFormGroup extends FormGroup {
      constructor(
        controls: { [k: string]: AbstractControl },
        validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions,
        asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[]
      ) {
        super({...controls, alwaysPresent: new FormControl()}, 
               validatorOrOpts, 
               asyncValidator
        );
        this.extendedProperties();
      }
    
      extendedProperties() {
        this.controls["additional_control"] = new FormControl("");
      }
    }

The above sample does two things

pass the constructor argument into super, and add an additional always present item on the control.
Manipulate the controls property directly as reflected in your original question.

Simply calling new ExtendedFormGroup({}) would now create a FormGroup with two pre-defined controllers alwaysPresent and additional_control

Old response

Since JavaScript, and therefore TypeScript by extension implement classes in a way that are essentially just labelled blocks with prototypes on them, you can use the square bracket notation to access properties on the this scope of your class.

    class Parent {
      foo: string;
      constructor(foo: string) {
        this.foo = foo;
      }
    }
    
    class Child extends Parent {
      constructor(foo: string) {
        super(foo);
        this.assignPropertiesDirectly();
      }
    
      assignPropertiesDirectly() {
        this["bar"] = "Creates 'bar' on Child";
        this["foo"] = "overwrites foo with this text";
      }
    }

However, this approach is brittle as it not only completely defeats the purpose of using TypeScript in the first place, but it also relies on typing string values for property names, which at best will be a hassle to maintain, and at worst will be error prone.

It sounds to me like your problem may be a good candidate for composition design.

hi Mikkel,I am not trying to alter the additional/sub properties of the class members, but theclass itself, it inherits from FormGroup , and I am trying to change the values of FormGroup itself — , Mar 01 '21 at 02:42
I gave points and accepted answer, feel free to thumbs up question also, thanks — , Mar 04 '21 at 07:46

Typescript Set Value of Class itself in Method, Inheritance from Base Class

1 Answers1

Updated Answer

Old response