Reactive Forms 基礎

核心概念

在 Reactive Forms 模式下，我們主要在 TypeScript 中設置和控制表單，而不是像 Template-driven Forms 那樣在範本中設置。這種方式提供了更強大的控制能力和靈活性。

基本設置

1. 建立表單模型

首先，我們需要在元件類別中建立表單模型：

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

@Component({
  // ...
})
export class LoginComponent {
  loginForm = new FormGroup({
    email: new FormControl(''),   // 空字串為預設值
    password: new FormControl('')
  });
}

在這個例子中：

• FormGroup 代表整個表單

• FormControl 代表表單中的各個控制項

• 小括號內可以設置控制項的預設值

2. 匯入必要模組

在 Standalone 元件中，需要匯入 ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  // ...
})

3. 將表單模型綁定到範本

在 HTML 範本中，有兩種方式綁定表單控制項：

方式一：使用 [formControl] 屬性

<input id="email" type="email" [formControl]="loginForm.controls.email" />

方式二：使用 formControlName 屬性（更簡潔）

<input id="password" type="password" formControlName="password" />

重要： 必須在 form 標籤上加上 [formGroup] 屬性，將整個表單模型綁定到範本：

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <!-- 表單控制項 -->
</form>

使用 FormBuilder（更簡潔的語法）

FormBuilder 提供了一種更簡潔的方式來建立複雜的表單：

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

constructor(private fb: FormBuilder) {}

loginForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(6)]]
});

嵌套表單

Reactive Forms 支援複雜的表單結構：

userForm = new FormGroup({
  basicInfo: new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  }),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl(''),
    zipCode: new FormControl('')
  })
});