Create multiple Reactive Forms based on Array of names - ngFor?

0
votes

I am making an ID lookup form in Angular. I would like to create multiple formGroups, in the same HTML file, based off an array of values I have (keep it DRY). Each formGroup will be attributed to the same function, but use a different value as the argument. I need the formGroup to have different values (associated with the value in the array) for the formControlName, placeholder, labels, and button value.

I've tried ngFor with limited success.

var idNames = ['Organization', 'Site', 'Location', 'Device'];

Example HTML file

<form [formGroup]='organizationForm'>

<label>
   Organization Id:
   <input type="text" 
   formControlName='organizationId' 
   placeholder="Organization Id">
   <button type="submit" (click)="idInfo()">Search for Organization</button>
 </label>

</form>

<form [formGroup]='siteForm'>

 <label>
   Site Id:
   <input type="text" 
   formControlName='siteId' 
   placeholder="Site Id">
   <button type="submit" (click)='idInfo()'>Search for Site</button>
 </label>

</form>

<form [formGroup]='locationForm'>

   <label>
     Location Id:
     <input type="text" 
     formControlName='locationId' 
     placeholder="Location Id">
     <button type="submit" (click)='idInfo()'>Search for Location</button>
   </label>

</form>

<form [formGroup]='deviceForm'>

 <label>
   Device Id:
   <input type="text" 
   formControlName='deviceId'
   placeholder="Device Id">
   <button type="submit" (click)='idInfo()'>Search for Device</button>
 </label>

</form>
2
javascripthtmlangulartypescript
This is close to a good question. Provide more detail about what you tried, what happened, and what you expected to happen. Use formatting to make it easier to read your question. Welcome to the community! – David M
So do you really want multiple FormGroups with a single form || do you want one FormGroup with multiple forms? – Narm
I would like multiple formGroups inside of one html file that all call the same function when clicked (but have different arguments provided). For example, if it's OrganizationForm, then it would use Organization as the data type and the input as it's ID. – dyno

2 Answers

0
votes

You might need a Single FormGroup with multiple formcontrols. If the individual items in form needs a complex structure use nested FormGroups

In component.ts

lookupForm: FormGroup;
idNames = ['Organization', 'Site', 'Location', 'Device'];

constructor( private fb: FormBuilder ) { this.createForm();}

createForm() {
  this.lookupForm = this.fb.group({
      Organization: '',
      Site: '',
      Location: '',
      Device: ''
    });
}

In component.html

<form [formGroup]='lookupForm'>
  <ng-container *ngFor="let id of idNames">
    <label [attr.for]="id">{{id}}</label>
    <input type="text"[formControlName]='id' [placeholder]="id" [attr.id]=id>
    <button type="submit" (click)="idInfo(id)">Search for Organization</button>
  </ng-container
</form>
0
votes

You can create new component or template to make your code 'DRY'

For template solution, you can take a look on this code:

<form [formGroup]="deviceForm">
    <ng-container
        [ngTemplateOutlet]="controlTemplate"    
        [ngTemplateOutletContext]="{labelText: 'Device Id', buttonText: 'Search for Device', controlName: 'deviceId'}"    
    ></ng-container>
</form>

<ng-template #controlTemplate let-labelText="labelText" let-buttonText="buttonText" let let-controlName="controlName">
    <label>
        {{labelText}}:
        <input type="text" 
        [formControlName]="controlName"
        [placeholder]="labelText">
        <button type="submit" (click)="idInfo()">{{buttonText}}</button>
    </label>
</ng-template>