I’m trying to capture data from a dynamic form using Angular’s reactive forms, but since the formControlNames are dynamic I can’t configure them in the component’s FormBuilder. How could I configure the formControlName in the ts file of the component to later store them in the database.
<code><div class="row">
<!-- Three Folders -->
<div *ngIf="showForm" formArrayName="items">
<div class="col-md-12 mb-4">
<div class="card border-dark mt-2 mb-4" *ngFor="let val of modelsaved">
<div class="card-header">
{{ val.fld_name }}
<div class="card-body" *ngFor="let iter of val.formfield; let i = index">
<label>{{ iter.label }}</label>
<input class="form-control" type="{{ iter.type }}" name="{{ iter.label }}"
[formControlName]="i">
</div>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
<!-- More 3 fields -->
<div class="col-md-12 mb-4">
<div *ngIf="!showForm" formArrayName="items">
<div class="card border-dark mt-2 mb-4">
<div class="card-header">
{{ objInfo.adm }}
</div>
<div class="card-body" *ngFor="let item of modelsaved; let i = index">
<label>{{ item.label }}</label>
<input class="form-control" type="{{ item.type }}" name="{{ item.label }}"
[formControlName]="i">
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</code>
<code><div class="row">
<!-- Three Folders -->
<div *ngIf="showForm" formArrayName="items">
<div class="col-md-12 mb-4">
<div class="card border-dark mt-2 mb-4" *ngFor="let val of modelsaved">
<div class="card-header">
{{ val.fld_name }}
<div class="card-body" *ngFor="let iter of val.formfield; let i = index">
<label>{{ iter.label }}</label>
<input class="form-control" type="{{ iter.type }}" name="{{ iter.label }}"
[formControlName]="i">
</div>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
<!-- More 3 fields -->
<div class="col-md-12 mb-4">
<div *ngIf="!showForm" formArrayName="items">
<div class="card border-dark mt-2 mb-4">
<div class="card-header">
{{ objInfo.adm }}
</div>
<div class="card-body" *ngFor="let item of modelsaved; let i = index">
<label>{{ item.label }}</label>
<input class="form-control" type="{{ item.type }}" name="{{ item.label }}"
[formControlName]="i">
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
</div>
</form>
</div>
</code>
<div class="row">
<!-- Three Folders -->
<div *ngIf="showForm" formArrayName="items">
<div class="col-md-12 mb-4">
<div class="card border-dark mt-2 mb-4" *ngFor="let val of modelsaved">
<div class="card-header">
{{ val.fld_name }}
<div class="card-body" *ngFor="let iter of val.formfield; let i = index">
<label>{{ iter.label }}</label>
<input class="form-control" type="{{ iter.type }}" name="{{ iter.label }}"
[formControlName]="i">
</div>
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
<!-- More 3 fields -->
<div class="col-md-12 mb-4">
<div *ngIf="!showForm" formArrayName="items">
<div class="card border-dark mt-2 mb-4">
<div class="card-header">
{{ objInfo.adm }}
</div>
<div class="card-body" *ngFor="let item of modelsaved; let i = index">
<label>{{ item.label }}</label>
<input class="form-control" type="{{ item.type }}" name="{{ item.label }}"
[formControlName]="i">
</div>
</div>
<div class="d-grid gap-2">
<button class="btn btn-lg btn-primary" type="button" (click)="saveTemplate()"><i
class="fa-solid fa-floppy-disk"></i>
Guardar</button>
</div>
</div>
</div>
</div>
</form>
</div>
I’m trying to capture data from a dynamic form using Angular’s reactive forms, but since the formControlNames are dynamic I can’t configure them in the component’s FormBuilder. How could I configure the formControlName in the ts file of the component to later store them in the database.