mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-11 02:33:10 +08:00
174e31b3fc
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
123 lines
4.4 KiB
Markdown
123 lines
4.4 KiB
Markdown
# リアクティブフォーム
|
||
|
||
リアクティブフォームは、フォーム入力を処理するためのモデル駆動のアプローチを提供します。オブザーバブルストリームを基盤として構築され、データモデルへの同期アクセスを提供するため、テンプレート駆動フォームよりもスケーラブルでテストしやすい特徴があります。
|
||
|
||
## コアクラス
|
||
|
||
リアクティブフォームは `@angular/forms` の以下の基本クラスで構成されます：
|
||
|
||
- `FormControl`：個別の入力の値と有効性を管理します。
|
||
- `FormGroup`：コントロールのグループ（オブジェクトのような構造）を管理します。
|
||
- `FormArray`：数値インデックスによるコントロールの配列を管理します。
|
||
- `FormBuilder`：コントロールインスタンス作成のためのファクトリーメソッドを提供するサービス。
|
||
|
||
## セットアップ
|
||
|
||
コンポーネントに `ReactiveFormsModule` をインポートします。
|
||
|
||
```ts
|
||
import {Component, inject} from '@angular/core';
|
||
import {ReactiveFormsModule, FormGroup, FormControl, Validators, FormBuilder} from '@angular/forms';
|
||
|
||
@Component({
|
||
selector: 'app-profile-editor',
|
||
imports: [ReactiveFormsModule],
|
||
templateUrl: './profile-editor.component.html',
|
||
})
|
||
export class ProfileEditor {
|
||
private fb = inject(FormBuilder);
|
||
|
||
// FormBuilder を使った簡潔な定義
|
||
profileForm = this.fb.group({
|
||
firstName: ['', Validators.required],
|
||
lastName: [''],
|
||
address: this.fb.group({
|
||
street: [''],
|
||
city: [''],
|
||
}),
|
||
aliases: this.fb.array([this.fb.control('')]),
|
||
});
|
||
|
||
onSubmit() {
|
||
console.warn(this.profileForm.value);
|
||
}
|
||
}
|
||
```
|
||
|
||
## テンプレートバインディング
|
||
|
||
モデルをビューにバインドするためのディレクティブを使用します：
|
||
|
||
- `[formGroup]`：`FormGroup` を `<form>` または `<div>` にバインドします。
|
||
- `formControlName`：グループ内の名前付きコントロールを入力にバインドします。
|
||
- `formGroupName`：ネストされた `FormGroup` をバインドします。
|
||
- `formArrayName`：ネストされた `FormArray` をバインドします。
|
||
- `[formControl]`：スタンドアロンの `FormControl` をバインドします。
|
||
|
||
```html
|
||
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
|
||
<input type="text" formControlName="firstName" />
|
||
|
||
<div formGroupName="address">
|
||
<input type="text" formControlName="street" />
|
||
</div>
|
||
|
||
<div formArrayName="aliases">
|
||
@for (alias of aliases.controls; track $index) {
|
||
<input type="text" [formControlName]="$index" />
|
||
}
|
||
</div>
|
||
|
||
<button type="submit" [disabled]="!profileForm.valid">Submit</button>
|
||
</form>
|
||
```
|
||
|
||
## コントロールへのアクセス
|
||
|
||
特に `FormArray` のコントロールに簡単にアクセスするためのゲッターを使用します。
|
||
|
||
```ts
|
||
get aliases() {
|
||
return this.profileForm.get('aliases') as FormArray;
|
||
}
|
||
|
||
addAlias() {
|
||
this.aliases.push(this.fb.control(''));
|
||
}
|
||
```
|
||
|
||
## 値の更新
|
||
|
||
- `patchValue()`：指定されたプロパティのみを更新します。構造の不一致があっても警告なく無視します。
|
||
- `setValue()`：モデル全体を置き換えます。フォームの構造を厳密に強制します。
|
||
|
||
```ts
|
||
updateProfile() {
|
||
this.profileForm.patchValue({
|
||
firstName: 'Nancy',
|
||
address: { street: '123 Drew Street' }
|
||
});
|
||
}
|
||
```
|
||
|
||
## 統合変更イベント
|
||
|
||
モダンな Angular（v18+）では、すべてのコントロールに単一の `events` オブザーバブルが提供され、値、ステータス、pristine、touched、リセット、サブミットイベントを追跡できます。
|
||
|
||
```ts
|
||
import {ValueChangeEvent, StatusChangeEvent} from '@angular/forms';
|
||
|
||
this.profileForm.events.subscribe((event) => {
|
||
if (event instanceof ValueChangeEvent) {
|
||
console.log('New value:', event.value);
|
||
}
|
||
});
|
||
```
|
||
|
||
## 手動ステート管理
|
||
|
||
- `markAsTouched()` / `markAllAsTouched()`：サブミット時にバリデーションエラーを表示するのに便利です。
|
||
- `markAsDirty()` / `markAsPristine()`：値が変更されたかどうかを追跡します。
|
||
- `updateValueAndValidity()`：値とステータスの再計算を手動でトリガーします。
|
||
- ほとんどのメソッドに `{ emitEvent: false }` または `{ onlySelf: true }` オプションを渡して伝播を制御できます。
|