What is the best method for retrieving the complete path of a FormControl in Angular versions 4 and above

Question

What is the best method for retrieving the complete path of a FormControl in Angular versions 4 and above

Is there a way to obtain the complete path of a FormControl in Angular 4+?

Below is my reactive form structure:

{
    name: '',
    address: {
        city: '',
        country: ''
    }
}

I urgently require the full path of the control:

const addressFormGroup = this.form.get('address');
const cityControl = addressFormGroup.get('city');
cityControl.plsGiveMeFullPath() // Should return 'address.city'

Are there any built-in methods to retrieve the full path of the cityControl: FormControl | FormGroup?

angular typescript angular-reactive-forms angular-forms

Answer 1

Answer №1

I have successfully implemented a pair of methods to achieve this specific functionality.

The initial method functions as a helper, tasked with retrieving the name of a control within its parent index. This is accomplished by scanning the parent's controls object for a matching control and then returning the corresponding key.

The second method operates recursively, leveraging the aforementioned helper to obtain the control's name and subsequently calling itself for the parent control. The returned strings are joined using dots ('.') along the way.

  getControlName(c: AbstractControl): string | null {
    if(!c.parent) return null;
    const formGroup = c.parent.controls;
    return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
  }

  getControlPath(c: AbstractControl, path: string): string | null {
    path = this.getControlName(c) + path;

    if(c.parent && this.getControlName(c.parent)) {
      path = "."+path;
      return this.getControlPath(c.parent, path);
    } else {
      return path;
    }

  }

Answer 2

I have successfully implemented a pair of methods to achieve this specific functionality.

The initial method functions as a helper, tasked with retrieving the name of a control within its parent index. This is accomplished by scanning the parent's controls object for a matching control and then returning the corresponding key.

The second method operates recursively, leveraging the aforementioned helper to obtain the control's name and subsequently calling itself for the parent control. The returned strings are joined using dots ('.') along the way.

  getControlName(c: AbstractControl): string | null {
    if(!c.parent) return null;
    const formGroup = c.parent.controls;
    return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
  }

  getControlPath(c: AbstractControl, path: string): string | null {
    path = this.getControlName(c) + path;

    if(c.parent && this.getControlName(c.parent)) {
      path = "."+path;
      return this.getControlPath(c.parent, path);
    } else {
      return path;
    }

  }

Answer 3

Answer №2

@sparrowrex Oh, this exceeds the character limit for a comment...

formGroup can be either AbstractControl[] or

{ [key: string]: AbstractControl }

. To handle both cases, simply check if it's an array and your code will function correctly:

const getControlName = (control: AbstractControl): string | null => {
  if (control.parent === null) {
    return null;
  }

  const children = control.parent.controls;

  if (Array.isArray(children)) {
    for (let index = 0; index < children.length; index++) {
      if (children[index] === control) {
        return `${index}`;
      }
    }
    return null;
  }

  return Object.keys(children).find(name => control === children[name]) || null;
};

Answer 4

@sparrowrex Oh, this exceeds the character limit for a comment...

formGroup can be either AbstractControl[] or

{ [key: string]: AbstractControl }

. To handle both cases, simply check if it's an array and your code will function correctly:

const getControlName = (control: AbstractControl): string | null => {
  if (control.parent === null) {
    return null;
  }

  const children = control.parent.controls;

  if (Array.isArray(children)) {
    for (let index = 0; index < children.length; index++) {
      if (children[index] === control) {
        return `${index}`;
      }
    }
    return null;
  }

  return Object.keys(children).find(name => control === children[name]) || null;
};

What is the best method for retrieving the complete path of a FormControl in Angular versions 4 and above

Answer №1

Answer №2

Similar questions

Setting the date of the NgbDatePicker through code

Exploring Angular2: Incorporating External Plugins with AngularCLI (webpack)

The function webpack.validateSchema does not exist

Using TypeScript to define task invocation parameters with AWS CDK's CfnMaintenanceWindowTask

Angular Error: Cannot call function panDelta on this.panZoomAPI

Troubles with applying Global Themes in StyledComponents for React Native

Tips for resetting a form after submission

How to assign a custom validator parameter to a form group in Angular

Issue with Next.js: Callback function not being executed upon form submission

When running the test, a "is not defined" ReferenceError occurs in the declared namespace (.d.ts) in ts-jest

Understanding TypeScript's ability to infer types in generics

Learn the process of presenting data in an HTML file using TypeScript within AngularJS 8

Guide to Display chat.html Overlay on home.html Using Ionic 2

Encountering path import errors when developing a sample webpack site within a TypeScript library

Paper-dropdown-menu component failing to render properly in web browser

Different ways to separate an axios call into a distinct method with vuex and typescript

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

Using TypeScript to define generic types for classes, method parameters, and method return types

Having trouble with Angular deeplinks - my app is opening but the routing isn't working as expected

Troubleshooting Azure typescript function: Entry point for function cannot be determined