欢迎来到我们全面的 Angular 课程的第三章！在本章中，我们将深入探讨投资组合平台的高级表单处理功能，重点介绍带有动态表单的投资组合构建器和文件上传组件。
回顾与预览 在我们开始之前，让我们看看我们已经涵盖了什么：
第 1 章：使用 Angular 20、Angular Material 和 Tailwind CSS 进行基本投资组合设置 第 2 章：涵盖路线、导航和服务的投资组合画廊。 在本章中我们将了解
Angular 反应表单和表单控件 文件上传系统基础知识 通过构建我们的投资组合构建器
投资组合构建器
您可以在www.ysdslt.com上访问当前正在运行的版本
了解投资组合构建器架构 投资组合构建器使用 Angular 的响应式表单实现了分层表单结构。该表单被组织成几个逻辑部分，这些部分与投资组合的显示方式相符：
主表单结构：
根表单组：包含所有投资组合部分 英雄资料：个人信息及介绍 关于数据：详细的个人和专业信息 技能数据：具有多种技能的动态技能类别 项目数据：包含技术的动态项目条目 联系数据：联系信息和社交链接 Angular Form Builder：像专业人士一样构建动态表单 Angular 表单构建器是 Angular 中创建复杂动态表单的最强大功能之一。无论您是构建简单的联系表单，还是像我们的 Portfolio Builder 这样的复杂多步骤向导，了解表单构建器对于现代 Angular 开发都至关重要。 在本指南中，我们将使用 Portfolio Builder 组件中的真实示例，探索 Angular 表单构建器的方方面面，从基本概念到高级模式。最终，您将能够自信地创建任何表单！
角度形式的类型 Angular 提供了两种处理表单的方法：
模板驱动表单：
使用模板中的指令构建的表单， Angular 自动创建表单控件 表单逻辑存在于模板中 ngModel双向绑定的 用途 @Component({ template: ` <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
<app-file-upload
name="avatar"
ngModel
accept="image/*"
required>
</app-file-upload>
<button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>
` }) export class TemplateFormComponent { onSubmit(form: NgForm) { console.log('Form submitted:', form.value); // form.value will contain { name: string, avatar: string (file data URL) } } } 反应形式：
在组件中以编程方式构建的表单 表单逻辑存在于组件中，具有更多的控制力和灵活性 使用 FormBuilder 显式创建表单 更明确的控制表单状态 我们的投资组合构建器使用反应式表单，因为它需要复杂的验证、动态内容以及对表单行为的精确控制。
表单生成器基础知识 什么是 FormBuilder？ FormBuilder 是 Angular 提供的一项服务，用于简化响应式表单的创建。它提供了一些方法，可以使用简洁易读的语法创建表单控件、组和数组。 主要方法：
group()：创建一个 FormGroup，它管理 FormControl 实例集合的值和验证状态。 control()：创建一个 FormControl 类，用于表示和管理单个表单输入元素的状态 array()：创建一个 FormArray 类，用于管理动态的表单控件集合。当表单输入框的数量不固定且可能在运行时发生变化时，该类尤其有用。 FormBuilder 基本设置和语法 要使用 FormBuilder，您需要：
在你的模块中导入 ReactiveFormsModule 在你的组件中注入 FormBuilder 使用 FormBuilder 方法创建表单结构 // In your component import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class MyComponent { myForm: FormGroup;
constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); } } FormBuilder.group()创建一个包含多个表单控件的 FormGroup：
表单验证 内置验证器：
Validators.required：字段必须有值 Validators.email：必须是有效的电子邮件格式 Validators.minLength(n)：最小字符长度 Validators.maxLength(n)：最大字符长度 Validators.min(n)：最小数值 Validators.max(n)：最大数值 Validators.pattern(regex)：自定义模式匹配 验证者实际操作：
// Array of validators email: ['', [ Validators.required, Validators.email, Validators.minLength(5) ]] 除此之外，我们还可以为自定义业务逻辑创建自定义验证器：
// Custom URL validator static urlValidator(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (!control.value) return null;
const urlPattern = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
const isValid = urlPattern.test(control.value);
return isValid ? null : { invalidUrl: { value: control.value } };
}; }
// Usage in form contactData: this.fb.group({ email: ['', [Validators.required, Validators.email]], linkedin: ['', CustomValidators.urlValidator()] }) 嵌套表单组 对于复杂的表单，你可以嵌套 FormGroups 来组织相关字段：
// From our Portfolio Builder this.portfolioForm = this.fb.group({ // Root level industry: ['', Validators.required],
// Nested form groups heroData: this.fb.group({...}),
aboutData: this.fb.group({...}) }); 嵌套组的模板绑定：
创建表单数组：
skillData: this.fb.group({ title: ['My Skills'], description: ['', [Validators.required]], categories: this.fb.array([this.createSkillCategory()]) }), 表单数组的辅助方法：
// Create a skill category createSkillCategory(): FormGroup { return this.fb.group({ title: ['', Validators.required], icon: ['', Validators.required], skills: this.fb.array([ this.fb.control('', Validators.required), this.fb.control('', Validators.required), this.fb.control('', Validators.required) ]) }); } 管理表单数组：
// Getter methods for easy access get categories(): FormArray { return this.portfolioForm.get('skillData.categories') as FormArray; } // Add new items addCategory(): void { this.categories.push(this.createSkillCategory()); } // Remove items removeCategory(index: number): void { this.categories.removeAt(index); }
