面试题：Angular响应式表单中如何动态添加和移除表单控件

Question

假设你正在使用Angular响应式表单构建一个用户信息录入页面，其中有一个部分允许用户动态添加或移除教育经历字段（每个教育经历包含学校名称、专业、入学时间、毕业时间等表单控件）。请描述实现这一功能的详细步骤，包括如何使用FormGroup和FormArray等相关类。

Answer 1

1. 创建表单结构：
   • 在组件的ts文件中，导入FormGroup、FormArray和FormControl等相关模块。

   import { Component } from '@angular/core';
   import { FormGroup, FormArray, FormControl } from '@angular/forms';
   

   • 创建一个FormGroup作为整个用户信息表单的容器，并在其中添加一个FormArray用于存储教育经历。

   export class UserInfoComponent {
     userForm: FormGroup;
     constructor() {
       this.userForm = new FormGroup({
         education: new FormArray([])
       });
     }
   }
   

2. 定义教育经历表单结构：
   • 创建一个方法来生成单个教育经历的FormGroup。

   createEducationGroup(): FormGroup {
     return new FormGroup({
       schoolName: new FormControl(''),
       major: new FormControl(''),
       enrollmentDate: new FormControl(''),
       graduationDate: new FormControl('')
     });
   }
   

3. 添加教育经历方法：
   • 在组件类中添加一个方法来向FormArray中添加新的教育经历FormGroup。

   addEducation() {
     const educationFormArray = this.userForm.get('education') as FormArray;
     educationFormArray.push(this.createEducationGroup());
   }
   

4. 移除教育经历方法：
   • 再添加一个方法来从FormArray中移除指定索引的教育经历FormGroup。

   removeEducation(index: number) {
     const educationFormArray = this.userForm.get('education') as FormArray;
     educationFormArray.removeAt(index);
   }
   

5. 在模板中显示和操作表单：
   • 在组件的html模板中，使用formGroup指令绑定到userForm。

   <form [formGroup]="userForm">
   

   • 使用*ngFor指令遍历FormArray中的教育经历FormGroup，并显示每个教育经历的表单控件。

   <div formArrayName="education">
     <div *ngFor="let edu of userForm.get('education').controls; let i = index">
       <div [formGroupName]="i">
         <label for="schoolName{{i}}">School Name:</label>
         <input type="text" formControlName="schoolName" id="schoolName{{i}}">
         <label for="major{{i}}">Major:</label>
         <input type="text" formControlName="major" id="major{{i}}">
         <label for="enrollmentDate{{i}}">Enrollment Date:</label>
         <input type="text" formControlName="enrollmentDate" id="enrollmentDate{{i}}">
         <label for="graduationDate{{i}}">Graduation Date:</label>
         <input type="text" formControlName="graduationDate" id="graduationDate{{i}}">
         <button type="button" (click)="removeEducation(i)">Remove</button>
       </div>
     </div>
   </div>
   

   • 添加一个按钮来调用addEducation方法，实现动态添加教育经历。

   <button type="button" (click)="addEducation()">Add Education</button>
   </form>