angular-forms

@angular/forms

バージョン： Angular 21（2025） タグ： フォーム、バリデーション、リアクティブフォーム、テンプレート駆動

参考資料： リアクティブフォーム • テンプレート駆動 • API

API の変更点

このセクションでは、最近のバージョン固有の API の変更について説明します。

• NEW：シグナルベースのフォームコントロール — Angular 19 以降でフォームコントロールにシグナルを統合

• NEW：関数型バリデーター — クラスベースのバリデーターより関数型バリデーターを優先してください

• NEW：AbstractControl.markAllAsTouched() — すべてのコントロールを touched にする新しいメソッド

• NEW：nonNullable オプション — null 非許容の FormControl を作成

• NEW：型付きフォーム — フォームグループと配列を完全に TypeScript でサポート

• DEPRECATED：クラスベースのバリデーター — 関数型バリデーターに移行してください

ベストプラクティス

• 複雑なフォームにはリアクティブフォームを使用してください — 構造、バリデーション、テスト容易性が向上します

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

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" />
      <div *ngIf="form.controls.email.invalid && form.controls.email.touched">
        Email is required
      </div>
    </form>
  `
})
export class LoginComponent {
  private fb = inject(FormBuilder);
  
  form = this.fb.nonNullable.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]]
  });

  onSubmit() {
    if (this.form.valid) {
      console.log(this.form.getRawValue());
    }
  }
}

• より簡潔なコードにするには FormBuilder を使用してください

form = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  address: this.fb.group({
    street: [''],
    city: ['']
  })
});

• 複雑なロジックにはカスタムバリデーターを使用してください

// Functional validator (preferred)
const forbiddenNameValidator = (control: AbstractControl): ValidationErrors | null => {
  const forbidden = ['admin', 'root', 'superuser'];
  return forbidden.includes(control.value) ? { forbiddenName: true } : null;
};

// Usage
name: ['', forbiddenNameValidator]

• サーバー側のバリデーションには非同期バリデーターを使用してください

email: ['', 
  [Validators.email], 
  [asyncValidator, { debounceTime: 300 }]
]

• 動的なフォームフィールドには FormArray を使用してください

const form = this.fb.group({
  emails: this.fb.array([
    this.fb.control('')
  ])
});

get emails(): FormArray {
  return this.form.get('emails') as FormArray;
}

addEmail() {
  this.emails.push(this.fb.control(''));
}

• パフォーマンス向上のために updateOn オプションを使用してください

// Only validate on blur
email: ['', { updateOn: 'blur' }]

// Only validate on submit
password: ['', { updateOn: 'submit' }]

• バリデーションエラーは条件付きで表示してください

<input formControlName="email" 
       [class.is-invalid]="email.invalid && (email.dirty || email.touched)" />

• 条件付きで無効にするフィールドには disable() を使用してください

// Disable based on another control
this.form.statusChanges.subscribe(() => {
  if (this.form.value.isAdmin) {
    this.form.controls.permissions.enable();
  } else {
    this.form.controls.permissions.disable();
  }
});

• フォームを適切にリセットしてください

// Reset with default values
this.form.reset({ email: '', name: 'Default' });

// Reset and clear validators
this.form.reset();
this.form.clearValidators();