0

Necesito crear un formGroup de manera dinamica, el nombre del campo vendra de una base de datos, por ejemplo: Inventario, compras y contabilidad. necesito que los campos sean dinamicos porue a veces seran mas o menos que los que acabo de describir.

export class ConfiguracionesComponent implements OnInit {

forma: FormGroup;

 constructor(private fb: FormBuilder,) { 
             this.crearFormulario();
            }
  // A VECES SERA ASI
  crearFormulario() {
    this.forma = this.fb.group({
      Inventario:        ['', Validators.required],
      compras :            ['', Validators.required],
      contabilidad :  ['', Validators.required]
    })
  }

  // OTRAS VECES SERA ASI
  crearFormulario() {
    this.forma = this.fb.group({
      Inventario:        ['', Validators.required],
      compras :            ['', Validators.required],
      contabilidad :  ['', Validators.required],
      ventas:  ['', Validators.required],
      tienda:  ['', Validators.required],
    })
  }

  

}

prove con un FormArray, asi:

  crearFormulario() {
    this.formaRPmodulos = this.fb.group({
      modulos: this.fb.array([
        
      ])
    })
  }

pero solo obtengo el valor asi:

{modulos:['true','false','true']}

cuando necesito el valor asi:

{modulos:[ventas:'true',compras:'false',contabilidad:'true']}

1 respuesta 1

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.