Creo entender lo que quieres hacer, para eso he creado un proyecto angular y he realizado el uso de la forma reactiva
En el contructor he agregado una variable de tipo FormBuilder
constructor(private formBuilder: FormBuilder) {}
En este caso he realizado un for el cual cumple el papel de llenar una lista de campos, simulando como si se obtuviera de la base de datos esa lista. lo he puesto en el OnInt.
public ngOnInit(): void {
this.listaCampos = [];
for (let idx = 0; idx < 5; idx++) {
this.listaCampos.push('campo' + (idx + 1));
if (idx === 4) {
console.log(this.listaCampos);
this.inicializarFormulario();
}
}
}
Cuando se finaliza en el ngOnInit el llenado de la lista he puesto el llamado de mi metodo inicializarFormulario()
private inicializarFormulario() {
let formularioTmp: FormGroup;
let jsonString = '';
this.listaCampos.forEach((campo, index) => {
jsonString += `"${campo}":"",`;
if (index === this.listaCampos.length - 1) {
jsonString = `{${jsonString.slice(0, jsonString.length - 1)}}`;
formularioTmp = this.formBuilder.group(JSON.parse(jsonString));
this.agregarValidaciones(formularioTmp);
}
});
}
Alli procedo a crear un string en formato json donde la key contiene el nombre que obtengo de mi lista y su value será vacío.
cuando se finaliza el for que se recorre armando el string, procedo a ejecutar el group de la variable FormBuilder, la cual recibe nuestro string de json como un objeto. este nos retorna un objeto con los FormControl que necesitamos.
Pero en este al finalizar la creación de nuestro formulario lo mandamos a un metodo llamado agregarValidaciones().
private agregarValidaciones(pFormulario: FormGroup) {
this.listaCampos.forEach((campo, idx) => {
console.log(pFormulario.controls[campo]);
pFormulario.controls[campo].setValidators([
Validators.required,
Validators.minLength(3)
]);
if (idx === this.listaCampos.length - 1) {
this.formulario = pFormulario;
}
});
}
Este mismo se encarga de agregarle a cada campo las validaciones, en el ejemplo he agregado 2 a cada campo, que sean requeridos y que tenga un minimo de caracteres para marcar valido el campo.
Igual te adjunto el código completo a continuación para que lo repliques y pruebes.
Mi app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Mi app.component.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div *ngIf="listaCampos !== undefined && listaCampos !== null && listaCampos.length > 0 && formulario !== null">
<form [formGroup]="formulario" (ngSubmit)="validarCampos()">
<div *ngFor="let campo of listaCampos">
<label for="{{campo}}">{{ campo | uppercase }} </label>
<input type="text" name="{{campo}}" id="{{campo}}" formControlName="{{campo}}">
</div>
<button type="submit">validar campos</button>
</form>
</div>
</body>
</html>
Mi app.component.ts:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public formulario: FormGroup = null;
public listaCampos: string[] = null;
constructor(private formBuilder: FormBuilder) { }
public ngOnInit(): void {
this.listaCampos = [];
for (let idx = 0; idx < 5; idx++) {
this.listaCampos.push('campo' + (idx + 1));
if (idx === 4) {
console.log(this.listaCampos);
this.inicializarFormulario();
}
}
}
private inicializarFormulario() {
let formularioTmp: FormGroup;
let jsonString = '';
this.listaCampos.forEach((campo, index) => {
jsonString += `"${campo}":"",`;
if (index === this.listaCampos.length - 1) {
jsonString = `{${jsonString.slice(0, jsonString.length - 1)}}`;
formularioTmp = this.formBuilder.group(JSON.parse(jsonString));
this.agregarValidaciones(formularioTmp);
}
});
}
private agregarValidaciones(pFormulario: FormGroup) {
this.listaCampos.forEach((campo, idx) => {
console.log(pFormulario.controls[campo]);
pFormulario.controls[campo].setValidators([
Validators.required,
Validators.minLength(3)
]);
if (idx === this.listaCampos.length - 1) {
this.formulario = pFormulario;
}
});
}
public validarCampos() {
console.log(54, this.formulario);
}
}
Espero te sirva.