在Angular中获取动态表单字段值的方法如下:
FormBuilder
来构建表单模型。例如,使用FormBuilder
创建一个简单的动态表单:import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-dynamic-form',
template: `
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
<div *ngFor="let field of formFields">
<label>{{ field.label }}</label>
<input [type]="field.type" [formControlName]="field.name">
</div>
<button type="submit">Submit</button>
</form>
`,
})
export class DynamicFormComponent {
dynamicForm: FormGroup;
formFields: any[];
constructor(private formBuilder: FormBuilder) {
this.dynamicForm = this.formBuilder.group({});
this.formFields = [
{ label: 'Name', type: 'text', name: 'name' },
{ label: 'Email', type: 'email', name: 'email' },
// Add more dynamic form fields here
];
this.formFields.forEach(field => {
this.dynamicForm.addControl(field.name, this.formBuilder.control(''));
});
}
onSubmit() {
const formValues = this.dynamicForm.value;
console.log(formValues);
// Process the form values here
}
}
formFields
数组定义了动态表单的字段,包括字段的标签、类型和名称。在构建表单模型时,使用formBuilder.group({})
创建一个空的表单组,并使用formBuilder.control('')
为每个字段创建一个表单控件,并将其添加到表单组中。*ngFor
指令遍历formFields
数组,动态生成表单字段。通过[formControlName]
绑定每个字段的名称到相应的表单控件。onSubmit()
方法。通过this.dynamicForm.value
获取表单的所有字段值,并进行进一步处理。领取专属 10元无门槛券
手把手带您无忧上云