Is it possible to keep the getters of the reactive form in a seperate file

Question

I am having a reactive form that has multiple form controls. For each form each control i have written a getter function which will get the name of the form control like below

get interface() {
  return this.deviceQosForm.get('interface');
}

Form:

this.deviceQosForm = this.formBuilder.group(
      {
        interface: [null, Validators.required],
        parent_id: [null, Validators.required],
        class_id: [null, [Validators.required, classMinMax]],
        class_name: [
          null,
          [
            Validators.required,
            Validators.minLength(3),
            Validators.maxLength(100),
            Validators.pattern(/^[a-zA-Z0-9 _-]*$/),
          ],
        ],
        description: [null],
        default: [false],
        ls_ss_speed: [null, [Validators.maxLength(8)]],
        ls_sss_unit: [null],
        ls_burst_speed: [null, [Validators.maxLength(8)]],
        ls_bs_unit: [null],
        ls_burst_duration: [null],
        ls_burst_duration_unit: [null],
        rt_ss_speed: [null, [Validators.maxLength(8)]],
        rt_sss_unit: [null],
        rt_burst_speed: [null, [Validators.maxLength(8)]],
        rt_bs_unit: [null],
        rt_burst_duration: [null],
        rt_burst_duration_unit: [null],
        ul_ss_speed: [null, [Validators.maxLength(8)]],
        ul_sss_unit: [null],
        ul_burst_speed: [null, [Validators.maxLength(8)]],
        ul_bs_unit: [null],
        ul_burst_duration: [null],
        ul_burst_duration_unit: [null],
      },
      {
        validator: atleastOneSteadyStateSpeed('ls_ss_speed', 'rt_ss_speed'),
      }
    );

getters:

  get interface() {
    return this.deviceQosForm.get('interface');
  }

  get parent_id() {
    return this.deviceQosForm.get('parent_id');
  }

  get class_id() {
    return this.deviceQosForm.get('class_id');
  }

  get class_name() {
    return this.deviceQosForm.get('class_name');
  }

  get description() {
    return this.deviceQosForm.get('description');
  }

  get default() {
    return this.deviceQosForm.get('default');
  }

  get ls_ss_speed() {
    return this.deviceQosForm.get('ls_ss_speed');
  }

  get ls_sss_unit() {
    return this.deviceQosForm.get('ls_sss_unit');
  }

  get ls_burst_speed() {
    return this.deviceQosForm.get('ls_burst_speed');
  }

  get ls_bs_unit() {
    return this.deviceQosForm.get('ls_bs_unit');
  }

  get ls_burst_duration() {
    return this.deviceQosForm.get('ls_burst_duration');
  }

  get ls_burst_duration_unit() {
    return this.deviceQosForm.get('ls_burst_duration_unit');
  }

  get rt_ss_speed() {
    return this.deviceQosForm.get('rt_ss_speed');
  }

  get rt_sss_unit() {
    return this.deviceQosForm.get('rt_sss_unit');
  }

  get rt_burst_speed() {
    return this.deviceQosForm.get('rt_burst_speed');
  }

  get rt_bs_unit() {
    return this.deviceQosForm.get('rt_bs_unit');
  }

  get rt_burst_duration() {
    return this.deviceQosForm.get('rt_burst_duration');
  }

  get rt_burst_duration_unit() {
    return this.deviceQosForm.get('rt_burst_duration_unit');
  }

  get ul_ss_speed() {
    return this.deviceQosForm.get('ul_ss_speed');
  }

  get ul_sss_unit() {
    return this.deviceQosForm.get('ul_sss_unit');
  }

  get ul_burst_speed() {
    return this.deviceQosForm.get('ul_burst_speed');
  }

  get ul_bs_unit() {
    return this.deviceQosForm.get('ul_bs_unit');
  }

  get ul_burst_duration() {
    return this.deviceQosForm.get('ul_burst_duration');
  }

  get ul_burst_duration_unit() {
    return this.deviceQosForm.get('ul_burst_duration_unit');
  }

Like this i am having around 50 getter functions inside the component.I would like to know whether this getter can be moved to a separate file.Is it a good practice to do

Answer 1

Yes, you can do as

export class MyGetter {
   constructor(
    public deviceQosForm: FormGroup
  ) {
  }

  get interface() {
    return this.deviceQosForm.get('interface');
  }

  ....
}

// Then in the form, you just need to extend it
export class MyForm extends MyGetter {
  constructor(
      private formBuilder: FormBuilder,
  ) {
    supper(formBuilder.group({...}))
  }
}

But, I'm not sure why did you need it. If possible, can you tell me your purpose?