how to get Attribute associated Angular FormControl

Question

I have multiple angular forms which are generated inside a ngFor loop as follows. and each form is a wizard step which a user can move forward by completing the form individually. in the form input fields i have added custom attribute that holds the error message by the dynamic building name. what i m struggling is to display error message associated formControl when click on Next as I cannot get the Native element from the FormControl.

 <div *ngFor="let building of buildings;let i = index" > 
   <form #childForms="ngForm" name="{{building.id}}" id="{{building.id}}" >
<input [attr.errorLabel]="'please name of the ' + building.Class " [name]="i + 'buildingName'" type="text" [(ngModel)]="building.Name"  class="text-iput" [required]="true">
   </form>  
 </div>


<button styleClass="action" label="Next" (onClick)="goNext(activeStep)"></button>

bellow is how i m trying to get the current step from the TS file and try to call validate manually

   activeStep : number = 0;
   @ViewChildren('childForms', {read: NgForm}) childForms: QueryList<NgForm>;

   goNext(activeStep) {

     errors = [];
     for (const name in this.childForms[activeStep].controls) {
         if (this.childForms[activeStep].controls[name].invalid) {
            // How Can I get the ATTRIBUTE associated with the form control here
             // any way that i can get the native element of the Form Control
             // in my case [attr.errorLabel]="'please name of the ' + building.Class "
         }
     }
  }

Answer 1

you can use a template reference variable in the inputs (I suggest also the name of the input was the same that the name of the control (*))

<input #input [attr.errorLabel]="..." [name]="building.Name'" ...>

then you can use

@ViewChildren('input',{read:ElementRef}) inputs:Query<ElementRef>

Then you can use some like

if (this.childForms[activeStep].controls[name].invalid) {
    const input=this.inputs.find(x=>x.nativeElement==name)
    const attr=input.nativeElement.getAttribute('errorLabel')
    ....
}

(*)If only has the inputs and you can not change the name you can use

let i=0;
for (const name in this.childForms[activeStep].controls) {
    if (this.childForms[activeStep].controls[name].invalid) {
        const input=this.inputs.find((x,index)=>index==i)
        const attr=input.nativeElement.getAttribute('errorLabel')
        ....
    }
    i++;
}

NOTE: you should check if exist the input to avoid errors. You can use a ternary operator

    const attr=input?input.nativeElement.getAttribute('errorLabel'):null