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?
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
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’)