1. 在组件中定义动态表单模型：
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
dynamicForm: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
// 初始化动态表单模型
this.dynamicForm = this.formBuilder.group({});
}
// 添加动态表单字段
addFormControl(fieldName: string, validators: any[] = []) {
this.dynamicForm.addControl(fieldName, this.formBuilder.control('', validators));
}
// 处理动态表单提交
onSubmit() {
if (this.dynamicForm.valid) {
console.log('Dynamic Form submitted:', this.dynamicForm.value);
// 处理表单提交逻辑
}
}
}
2. 在模板中使用动态表单：
<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
<!-- 动态添加表单字段 -->
<div *ngFor="let controlName of dynamicForm.controls | keys">
<label for="{{ controlName }}">{{ controlName | titlecase }}:</label>
<input type="text" [id]="controlName" [formControlName]="controlName">
<!-- 显示表单验证错误信息 -->
<div *ngIf="dynamicForm.get(controlName).hasError('required')">
{{ controlName | titlecase }} is required.
</div>
</div>
<button type="submit" [disabled]="!dynamicForm.valid">Submit</button>
</form>
在上述代码中，addFormControl 方法用于动态地向表单模型中添加字段。*ngFor 指令用于遍历动态表单的控件，并根据控件的类型显示相应的输入字段。通过 formControlName 指令，将动态添加的控件与表单模型中的字段进行绑定。验证错误信息同样可以使用 *ngIf 来显示。
在实际应用中，你可以根据需要调整动态表单的结构，例如添加下拉框、多选框等元素，以及定义更复杂的验证规则。这个基本的示例可以作为起点，根据实际需求进行扩展。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4952/Angular