How to implement Renderer2 to make forms in Angular

Question

I am developing an application, in Angular 15, that displays a form for a dynamic query. I get the form parameters from the Backend. I get from back something like this

{
  "codRespuesta": 0,
  "glosaRespuesta": "Ejecución Exitosa",
  "paramReportList": [
    {
      "codEmpresa": 1,
      "idReport": 1,
      "idParamReport": 1,
      "nomParamReport": "sucursal",
      "tipoDato": "SUCURSAL"
    },
    {
      "codEmpresa": 1,
      "idReport": 1,
      "idParamReport": 1,
      "nomParamReport": "id_usuario",
      "tipoDato": "NUMBER"
    },
    {
      "codEmpresa": 1,
      "idReport": 1,
      "idParamReport": 2,
      "nomParamReport": "fechaTermino",
      "tipoDato": "Date"
    }
  ]
}

where TipoDato says which type of input I have to show in the form.

For displaying the form, I made a FormGroup to add the new elements to the form.}

this.queryForm = this.fbuilder.group({});

Therefore, I evaluate each parameter I receive back using this function

evalParam(tipo: string, nomParam: string) {
    const tipoEval = tipo.toUpperCase();
    switch (tipoEval) {
      case 'SUCURSAL':
        this.isSucursal(nomParam);
        break;
      case 'NUMBER':
        this.isNumber(nomParam);
        break;

      case 'VARCHAR':
        this.isVarchar(nomParam);
        break;

      case 'DATE':
        this.isDate(nomParam)
        break;

      default:
        break;
    }
  }

Where in case of isNumber, I add a new FormControl with the name of the parameter and I display using Rendered2 the new element in the form

isNumber(nomParam: string) {
    this.renderInput('nomPdd', 'number')
    this.queryForm.addControl(
      nomParam,
      new FormControl('', [Validators.required])
    );
  }

renderInput(nomParam: string, type: string) {
    const input = this.renderer.createElement('input')
    this.renderer.setAttribute(input, 'type', type);
    this.renderer.addClass(input, 'input-reporte');
    this.renderer.setAttribute(input, 'formControlName', nomParam);

    const label = this.renderer.createElement('label');
    const labelText = this.renderer.createText(nomParam);
    this.renderer.appendChild(label, labelText);

    const div = this.renderer.createElement('div');
    this.renderer.addClass(div, 'my-3');
    this.renderer.appendChild(div, label);
    this.renderer.appendChild(div, input);

    this.renderer.appendChild(this.formulario.nativeElement, div);
  }

The problem is when I try to submit the form data, and the value of each element of queryForm is empty.

Please, if anyone can help me, I will be very grateful

Renderer2 NOT allow add "directives" or "components" to an HTML (it's the same if you use plain javascript). So you can not use it to do what you want. Instead of use structural directives looping over an array of elements (you need think about the structure of this elements: what properties you need to create the different inputs, cvan be, e.g. label, type, errors,...) — Eliseo
– Eliseo, Commented Apr 4, 2024 at 6:35

Naren Murali · Accepted Answer · 2024-04-03 20:10:18Z

0

You need to run an *ngFor on each of the array elements inside paramReportList and render the form elements, you can switch the type of form control using *ngSwitch this will give you the desired output!

answered Apr 3, 2024 at 20:10

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement Renderer2 to make forms in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related