如何实现Renderer2在Angular中制作表单

Question

我正在 Angular 15 中开发一个应用程序，它显示动态查询的表单。我从后端获取表单参数。 我从后面得到这样的东西

{
  "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"
    }
  ]
}

TipoDato 表示我必须在表单中显示哪种类型的输入。

为了显示表单，我创建了一个 FormGroup 来将新元素添加到表单中。}

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

因此，我使用此函数评估收到的每个参数

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;
    }
  }

如果是

isNumber

，我添加一个带有参数名称的新

FormControl

，并使用 Rendered2 在表单中显示新元素

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);
  }

问题是当我尝试提交表单数据时，

queryForm

的每个元素的值为空。

请，如果有人可以帮助我，我将非常感激

Answer 1

您需要在

*ngFor

内的每个数组元素上运行

paramReportList

并渲染表单元素，您可以使用

*ngSwitch

切换表单控件的类型，这将为您提供所需的输出！