So i currently have a reactive form with controls nested inside of it. Something like this:

costForm = new FormGroup({
  year1: new FormGroup({
    mrc: new FormControl(''),
    otc: new FormControl(''),
  })
})

I loop over this form using a simple Object.keys(costForm).forEach((controlName) => {...}) and then get the control with this.costForm.get(controlName) I then send over this control to various multiple function but it seems that now in one of the functions i need the controlName itself to check some conditions. Although I could send the control name to all the functions but that would be very useless in some of the functions. I have seen this fragment Get name of Form Control (answer 2) but it has too loop over the parent controls again. Is there a better way to find the name of the control?

So i currently have a reactive form with controls nested inside of it. Something like this:

costForm = new FormGroup({
  year1: new FormGroup({
    mrc: new FormControl(''),
    otc: new FormControl(''),
  })
})

I loop over this form using a simple Object.keys(costForm).forEach((controlName) => {...}) and then get the control with this.costForm.get(controlName) I then send over this control to various multiple function but it seems that now in one of the functions i need the controlName itself to check some conditions. Although I could send the control name to all the functions but that would be very useless in some of the functions. I have seen this fragment Get name of Form Control (answer 2) but it has too loop over the parent controls again. Is there a better way to find the name of the control?

• javascript
• angular
• angular-reactive-forms

• I updated answer – user16695846 Commented Aug 28, 2021 at 8:38

2 Answers 2

When you are using reactive form you are getting access to controls.

Object.keys(this.costForm.controls).forEach((controlName) => {
console.log(controlName)})

To get one specific control:

this.costForm.get(’nameOfControl’)

You need make a recursive function. You can think in a function that get a FomGroup or a FormArray

   loopGroup(form: FormGroup | FormArray) {
    if (form instanceof FormArray) {  //if is a FormArray
      form.controls.forEach(x => {
        if (x instanceof FormControl) this.makeSomething(x);
        if (x instanceof FormGroup || x instanceof FormArray)
         this.loopGroup(x);
      });
    } else {  //if is a FormGroup
      Object.keys(form.controls).forEach(key => {
        const control = form.get(key);
        if (control instanceof FormControl) this.makeSomething(control);
        if (control instanceof FormGroup || control instanceof FormArray)
         this.loopGroup(control);
      });
    }
  }

  makeSomething(control:AbstractControl){
      ...make something...
  }

You use as

  this.loopGroup(this.myForm)

But really I don't know want you want achieve.

Update About to get the "html tag", the problem is that a FormControl is not relationated with the html element(*). A FormControl exist independently is you has a input or not, so,e.g. you can not access to the attributes of the html tags from the FormControl

So we need take another aproach, that is create a simple directive that allow us get the NgControl and the htmlElement. Is we use some like

@Directive({
  selector: 'input'
})
export class HtmlControl{
   constructor(@Optional() private ngControl:NgControl,
               public elementRef:ElementRef){}

   isControl(control:AbstractControl)
   {
        return this.ngControl.control==control
   }
} 

We can get all the "inputs" using ViewChildren

  @ViewChildren(HtmlControl) controls:QueryList<HtmlControl>

And we can do in our function makeSomething

  makeSomething(control:AbstractControl){
    const ctrl=this.controls.find(x=>x.isControl(control))
    console.log(ctrl.elementRef)
      ...make something...
  }

(*)Really a NgControl has two properties: control and valueAccessor, in valueAccessor._elementRef you has the elementRef and in control you has the FormControl, but I don't know how access to the NgControl of a FormControl