我正在 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
的每个元素的值为空。
请,如果有人可以帮助我,我将非常感激
您需要在
*ngFor
内的每个数组元素上运行 paramReportList
并渲染表单元素,您可以使用 *ngSwitch
切换表单控件的类型,这将为您提供所需的输出!