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.

Answer 1

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.