面试题：Angular结合TypeScript实现响应式表单验证及动态表单构建

Question

利用TypeScript在Angular中创建一个响应式表单，要求包含常见的表单控件如输入框、下拉框等。实现自定义的表单验证逻辑，例如验证输入是否为合法邮箱格式。并且能够根据后端返回的数据动态构建表单结构，描述整体实现思路及关键代码片段。

Answer 1

实现思路

1. 安装依赖：确保项目中安装了Angular和TypeScript相关依赖，并且Angular CLI已经安装。
2. 创建表单组件：使用Angular CLI生成表单组件。
3. 导入响应式表单模块：在app.module.ts中导入ReactiveFormsModule。
4. 定义表单结构和验证逻辑：在组件类中定义表单控件，以及自定义验证函数。
5. 动态构建表单：从后端获取数据，根据数据结构动态创建表单控件。
6. 在模板中显示表单：使用Angular的表单指令将表单控件渲染到模板中。

关键代码片段

1. 导入模块 在app.module.ts中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform - browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, ReactiveFormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 组件类 在form.component.ts中：

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

function emailValidator(control: FormControl): { [s: string]: boolean } | null {
  if (!control.value.match(/^[a - zA - Z0 - 9_.+-]+@[a - zA - Z0 - 9 -]+\.[a - zA - Z0 - 9 -]+$/)) {
    return { 'invalidEmail': true };
  }
  return null;
}

@Component({
  selector: 'app - form',
  templateUrl: './form.component.html'
})
export class FormComponent {
  myForm: FormGroup;
  constructor() {
    this.myForm = new FormGroup({
      email: new FormControl('', [Validators.required, emailValidator]),
      dropdown: new FormControl('', Validators.required)
    });
    // 模拟从后端获取数据
    const backendData = {
      formControls: [
        { type: 'input', name: 'username', required: true },
        { type: 'dropdown', name: 'role', options: ['admin', 'user'], required: true }
      ]
    };
    this.buildForm(backendData);
  }

  buildForm(data: any) {
    data.formControls.forEach((control: any) => {
      if (control.type === 'input') {
        const validators = control.required? [Validators.required] : [];
        this.myForm.addControl(control.name, new FormControl('', validators));
      } else if (control.type === 'dropdown') {
        const validators = control.required? [Validators.required] : [];
        this.myForm.addControl(control.name, new FormControl('', validators));
      }
    });
  }
}

3. 模板文件 在form.component.html中：

<form [formGroup]="myForm">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="myForm.get('email').hasError('required') && (myForm.get('email').touched || myForm.get('email').dirty)">
      Email is required.
    </div>
    <div *ngIf="myForm.get('email').hasError('invalidEmail') && (myForm.get('email').touched || myForm.get('email').dirty)">
      Please enter a valid email.
    </div>
  </div>
  <div>
    <label for="dropdown">Dropdown:</label>
    <select id="dropdown" formControlName="dropdown">
      <option value="">Select an option</option>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
    <div *ngIf="myForm.get('dropdown').hasError('required') && (myForm.get('dropdown').touched || myForm.get('dropdown').dirty)">
      Dropdown selection is required.
    </div>
  </div>
  <!-- 动态表单控件显示 -->
  <div *ngFor="let control of myForm.controls | keyvalue">
    <div *ngIf="control.value instanceof FormControl">
      <label [for]="control.key">{{control.key}}</label>
      <input type="text" [id]="control.key" [formControlName]="control.key">
    </div>
    <div *ngIf="control.value instanceof FormControl && control.value.hasError('required') && (control.value.touched || control.value.dirty)">
      {{control.key}} is required.
    </div>
  </div>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>