# Reactive Forms 基礎

### 核心概念

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

### 基本設置

#### 1. 建立表單模型

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

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

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

在這個例子中：

* `FormGroup` 代表整個表單
* `FormControl` 代表表單中的各個控制項
* 小括號內可以設置控制項的預設值

#### 2. 匯入必要模組

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

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

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

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

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

**方式一：使用 \[formControl] 屬性**

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

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

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

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

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

### 使用 FormBuilder（更簡潔的語法）

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

```typescript
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 支援複雜的表單結構：

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

