Así que actualmente tengo un formulario reactivo con controles anidados dentro de él. Algo como esto:
costForm = new FormGroup({ year1: new FormGroup({ mrc: new FormControl(''), otc: new FormControl(''), }) }) Recorro este formulario usando un Object.keys(costForm).forEach((controlName) => {...}) y luego obtengo el control con this.costForm.get(controlName) Luego envío este control a varios función múltiple pero parece que ahora en una de las funciones necesito el nombre de control en sí mismo para verificar algunas condiciones. Aunque podría enviar el nombre del control a todas las funciones, sería muy inútil en algunas de las funciones. He visto este fragmento Obtener el nombre de Control de formulario (respuesta 2) pero también tiene un bucle sobre los controles principales nuevamente. ¿Hay una mejor manera de encontrar el nombre del control?
Necesitas hacer una función recursiva. Puedes pensar en una función que obtenga un FomGroup o un 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... }usas como
this.loopGroup(this.myForm)Pero realmente no sé lo que quieres lograr.
Actualice Acerca de para obtener la "etiqueta html", el problema es que un FormControl no está relacionado con el elemento html (*). Un FormControl existe independientemente si tiene una entrada o no, por lo que, por ejemplo, no puede acceder a los atributos de las etiquetas html desde FormControl
Entonces, debemos adoptar otro enfoque, es decir, crear una directiva simple que nos permita obtener NgControl y htmlElement. ¿Usamos algunos como
@Directive({ selector: 'input' }) export class HtmlControl{ constructor(@Optional() private ngControl:NgControl, public elementRef:ElementRef){} isControl(control:AbstractControl) { return this.ngControl.control==control } }Podemos obtener todas las "entradas" usando ViewChildren
@ViewChildren(HtmlControl) controls:QueryList<HtmlControl>Y podemos hacer en nuestra función hacerAlgo
makeSomething(control:AbstractControl){ const ctrl=this.controls.find(x=>x.isControl(control)) console.log(ctrl.elementRef) ...make something... }(*)Realmente un NgControl tiene dos propiedades: control y valueAccessor, en valueAccessor._elementRef tienes el elementRef y en control tienes el FormControl, pero no se como acceder al NgControl de un FormControl
Cuando usa la forma reactiva, obtiene acceso a los controles.
Object.keys(this.costForm.controls).forEach((controlName) => { console.log(controlName)})Para obtener un control específico:
this.costForm.get('nombreDeControl')