表单

路线图「Forms」：模板驱动 适合简单字段；响应式表单（Reactive Forms） 用 FormGroup 建模，适合 B 端复杂校验。企业后台与 Vue 3 核心 管理页类似，复杂场景首选 Reactive。

学习目标

• 用 FormBuilder 构建 FormGroup 与校验器
• 对比 Template-driven 与 Reactive Forms 适用场景
• 在模板展示字段级错误信息

核心概念

响应式表单

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">标题必填（至少 2 字）</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" />

需 FormsModule；双向绑定类似 Vue v-model。

与 React/Next 对照

	Angular Reactive	React 受控组件	Next.js
模型	FormGroup	useState 对象	同 React
校验	Validators	手动 / zod	同 React + Server Actions
错误 UI	control.invalid	字段 state	同 React

Next.js 15+ 可用 Server Actions 提交；Angular SPA 通常 POST 到 Spring Boot /api/*。

练习

• 为 slug 加自定义校验：禁止 关键字