表单

Angular 提供 模板驱动 与 响应式 两套表单 API。B 端后台（与 Vue 3 核心 管理页类似）复杂校验多用 Reactive Forms；简单场景可用模板驱动 ngModel。

学习目标

• 对比 Template-driven 与 Reactive Forms
• 用 FormBuilder 构建 FormGroup
• 做同步/异步校验与错误展示

核心内容

响应式表单（推荐）

import { Component, inject } from "@angular/core";
import { ReactiveFormsModule, FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: "app-track-form",
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <input formControlName="title" placeholder="课程标题" />
      @if (form.controls.title.invalid && form.controls.title.touched) {
        <span class="error">标题必填</span>
      }
      <input formControlName="slug" placeholder="slug" />
      <button type="submit" [disabled]="form.invalid">保存</button>
    </form>
  `,
})
export class TrackFormComponent {
  private fb = inject(FormBuilder);

  form = this.fb.nonNullable.group({
    title: ["", [Validators.required, Validators.minLength(2)]],
    slug: ["", [Validators.required, Validators.pattern(/^[a-z0-9-]+$/)]],
  });

  submit() {
    if (this.form.invalid) return;
    console.log(this.form.getRawValue());
  }
}

模板驱动（速览）

<input [(ngModel)]="title" name="title" required #t="ngModel" />
<span *ngIf="t.invalid && t.touched">必填</span>

需在 imports 加入 FormsModule。双向绑定类似 Vue 的 v-model。

对比

	Reactive Forms	Template-driven	Vue
模型	FormGroup 对象	模板 ngModel	v-model
校验	Validators 函数	模板指令	rules 对象
测试	易单测	需 DOM	类似 reactive
适用	复杂 B 端	简单字段	两者皆有

表单值类型可定义 interface TrackForm（TypeScript 核心），与后端 DTO 对齐。

练习