【Angular】动态表单（Dynamic Forms）

在 Angular 中，动态表单（Dynamic Forms） 是指表单的结构和内容可以在运行时动态生成，而不是在编译时就确定好。通常，动态表单用于处理复杂的用户输入需求，或者需要根据不同的业务场景动态调整表单控件（如表单字段、验证规则等）。

例如，一个表单可能包含不同类型的输入字段，选择框，日期选择器，或其他自定义控件，且这些控件的显示或行为会根据不同的条件（如用户选择、角色、权限等）进行变化。

Angular 提供了两个主要的表单模块来处理表单：模板驱动表单（Template-driven Forms） 和 响应式表单（Reactive Forms）。动态表单通常是与 响应式表单（Reactive Forms） 结合使用的，因为响应式表单更灵活且易于处理动态表单。

1. 创建动态表单的基本步骤

动态表单的创建分为以下几个步骤：

1. 定义表单数据模型：表单的结构和控件定义会在组件中以数据模型的形式进行存储。
2. 动态生成表单控件：根据模型数据，动态创建相应的表单控件（例如，输入框、选择框等）。
3. 应用表单验证：为每个控件应用验证规则。
4. 提交表单：处理表单提交事件，获取用户输入的数据。

2. 响应式表单

响应式表单是 Angular 中处理动态表单的推荐方式。它通过 FormGroup 和 FormControl 类来定义表单的结构和控件。

2.1 创建动态表单控件

首先，创建一个 Angular 组件来生成动态表单：

import {
   
    Component, OnInit } from '@angular/core';
import {
   
    FormGroup, FormControl, 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; // 定义动态表单
  formFields: any[] = []; // 用于存储表单字段定义
  
  constructor() {
   
    }

  ngOnInit(): void {
   
   
    // 模拟从服务器获取表单字段配置
    this.formFields = [
      {
   
    name: 'username', label: 'Username', type: 'text', validators: [Validators.required] },
      {
   
    name: 'email', label: 'Email', type: 'email', validators: [Validators.required, Validators.email] },
      {
   
    name: 'age', label: 'Age', type: 'number', validators: [Validators.required, Validators.min(18)] }
    ]</