Angular 技术教程 – 动态表单构建详解

引言

在Angular中构建动态表单是一项非常常见的需求，尤其是在需要处理用户输入数据的各种应用中。动态表单允许你根据应用的状态动态地添加或移除表单控件。本文将介绍如何在Angular中构建动态表单，并附带一个详细的案例讲解。

准备工作

在开始之前，请确保你的开发环境已经安装了Angular。如果你还没有安装Angular CLI，可以使用以下命令进行安装：

npm install -g @angular/cli

创建Angular项目

使用Angular CLI创建一个新的Angular项目：

ng new dynamic-form-app

然后导航到项目目录中：

cd dynamic-form-app

生成表单组件

使用Angular CLI生成一个新的组件，用于展示动态表单：

ng generate component dynamic-form

表单模型

我们定义一个表单项的模型，用于描述每个表单控件：


export interface FormField {
    key: string;
    label: string;
    type: 'text' | 'number' | 'checkbox' | 'select';
    options?: { value: string | number, label: string }[];
}

表单组件实现

在`dynamic-form.component.ts`中，实现动态表单的逻辑：


import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { FormField } from './form-field';

@Component({
    selector: 'app-dynamic-form',
    templateUrl: './dynamic-form.component.html',
    styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
    form: FormGroup;
    fields: FormField[] = [
        { key: 'name', label: 'Name', type: 'text' },
        { key: 'age', label: 'Age', type: 'number' },
        { 
            key: 'hobbies', 
            label: 'Hobbies', 
            type: 'checkbox', 
            options: [
                { value: 'reading', label: 'Reading' },
                { value: 'swimming', label: 'Swimming' },
                { value: 'running', label: 'Running' }
            ] 
        },
        { 
            key: 'country', 
            label: 'Country', 
            type: 'select', 
            options: [
                { value: 'us', label: 'United States' },
                { value: 'cn', label: 'China' },
                { value: 'uk', label: 'United Kingdom' }
            ] 
        }
    ];

    constructor(private fb: FormBuilder) {}

    ngOnInit() {
        this.form = this.fb.group({
            fields: this.fb.array([])
        });

        this.fields.forEach(field => this.addFieldGroup(field));
    }

    addFieldGroup(field: FormField) {
        const control = this.form.get('fields');

        if (field.type === 'checkbox') {
            const group = this.fb.group({});
            field.options.forEach(option => {
                group.addControl(option.value, this.fb.control(false, Validators.requiredFalse));
            });
            control.push(group);
        } else {
            control.push(this.fb.group({
                [field.key]: ['', [Validators.required]]
            }));
        }
    }

    onSubmit() {
        console.log(this.form.value);
    }
}

表单模板

在`dynamic-form.component.html`中，定义表单模板：



    
        
            
                {{ fields[i].label }}
                
            
            
            
                {{ fields[i].label }}
                
                    
                        {{ option.label }}
                    
                
            

            
                
                    {{ fields[i].label }}
                
                
                     {{ option.label }}