隨記

Week 05 · Day 03 — Reactive 表單：FormBuilder 與 FormGroup

學習目標

  • 認識 Reactive 表單
  • 用 FormBuilder 建立表單模型
  • 在模板用 [formGroup] 與 formControlName 連結

重點

Reactive 表單特色 - 表單結構在 TypeScript 類別中建立（資料驅動） - 較好測試、適合複雜邏輯 - 使用 FormGroup / FormControl / FormBuilder

前置：import ReactiveFormsModule 

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ imports: [ReactiveFormsModule] })

用 FormBuilder 建立表單 

import { FormBuilder, Validators } from '@angular/forms';

@Component({ ... })
export class RegisterComponent {
  registerForm = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(6)]],
    confirmPassword: ['']
  }, { validators: this.passwordMatchValidator });

  constructor(private fb: FormBuilder) {}

  passwordMatchValidator(form: FormGroup) {
    const password = form.get('password')?.value;
    const confirmPassword = form.get('confirmPassword')?.value;
    return password === confirmPassword ? null : { passwordMismatch: true };
  }
}
- fb.group({ 欄位: [預設值, [驗證器]] }) - 第二參數可放「群組層級」驗證器（如密碼相符）

實作

  1. import ReactiveFormsModule
  2. 建立 registerForm（含 name/email/password/confirmPassword）
  3. 在模板用 [formGroup]="registerForm" 連結

作業

  • import ReactiveFormsModule
  • 用 FormBuilder 建立含 4 欄位的註冊表單
  • 說明 fb.group 內每個欄位的 [預設值, [驗證器]] 結構