Angular Reactive Forms: FormControl の値変更を監視する方法

Angular で FormControl の値を取得する方法

value プロパティを使用する

最も簡単な方法は、value プロパティを使用することです。これは、FormControl の現在の値を直接返すプロパティです。

const firstNameControl = new FormControl('Taro');
console.log(firstNameControl.value); // Taro

get() メソッドを使用する

get() メソッドを使用して、FormControl の値を取得することもできます。この方法は、より汎用性があり、FormControl の他のプロパティにもアクセスできます。

const formGroup = new FormGroup({
  firstName: new FormControl('Taro'),
  lastName: new FormControl('Yamada'),
});

console.log(formGroup.get('firstName').value); // Taro

• FormControl の値は、いつでも変更できます。値を変更するには、setValue() メソッドを使用します。
• FormGroup の場合は、get() メソッドを使用して個々の FormControl の値を取得できます。
• FormControl の値は、非同期的に取得することもできます。valueChanges Observable を使用して、値変更を監視できます。

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="firstNameControl.value">
    <button (click)="logValue()">値を取得</button>
  `,
})
export class AppComponent {
  firstNameControl = new FormControl('Taro');

  logValue() {
    console.log(this.firstNameControl.value);
  }
}

このコードでは、firstNameControl という FormControl を作成し、input 要素にバインドしています。logValue() メソッドは、ボタンをクリックされたときに呼び出され、firstNameControl の値をコンソールにログ出力します。

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

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm">
      <input type="text" formControlName="firstName">
      <input type="text" formControlName="lastName">
      <button type="button" (click)="logValue()">値を取得</button>
    </form>
  `,
})
export class AppComponent {
  userForm = new FormGroup({
    firstName: new FormControl('Taro'),
    lastName: new FormControl('Yamada'),
  });

  logValue() {
    console.log(this.userForm.get('firstName').value);
    console.log(this.userForm.value); // フォーム全体の値を取得
  }
}

このコードでは、userForm という FormGroup を作成し、input 要素にバインドしています。logValue() メソッドは、ボタンをクリックされたときに呼び出され、userForm の firstName FormControl の値をコンソールにログ出力します。また、userForm.value を使用して、フォーム全体の値を取得することもできます。

非同期的に値を取得する

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" [(ngModel)]="firstNameControl.value">
    <p>現在の値: {{ firstNameControl.value }}</p>
  `,
})
export class AppComponent {
  firstNameControl = new FormControl('');

  constructor() {
    this.firstNameControl.valueChanges.subscribe((value) => {
      console.log('値が変更されました:', value);
    });
  }
}

このコードでは、firstNameControl の valueChanges Observable にサブスクライブしています。これにより、FormControl の値が変更されるたびに、console.log() メソッドが呼び出されます。

Template Driven Forms を使用している場合は、ngModel ディレクティブを使用して FormControl の値を取得できます。

<input type="text" [(ngModel)]="firstName" />
<p>現在の値: {{ firstName }}</p>

このコードでは、ngModel ディレクティブを使用して firstName という変数に FormControl の値をバインドしています。

Form Controls をクエリする

formGroup または formArray インスタンスを使用して、フォームコントロールをクエリすることもできます。

const formGroup = new FormGroup({
  firstName: new FormControl('Taro'),
  lastName: new FormControl('Yamada'),
});

const firstNameControl = formGroup.controls['firstName'];
console.log(firstNameControl.value); // Taro

このコードでは、formGroup インスタンスを使用して firstName という名前の FormControl を取得しています。

カスタムバリデーターを使用する

カスタムバリデーターを使用すると、FormControl の値にアクセスして、バリデーションロジックを実行することができます。

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function fullNameValidator(control: AbstractControl): ValidatorFn {
  const firstName = control.get('firstName').value;
  const lastName = control.get('lastName').value;

  if (!firstName || !lastName) {
    return { fullNameMissing: true };
  }

  return null;
}

このコードでは、fullNameValidator というカスタムバリデーター関数を定義しています。この関数は、firstName と lastName の FormControl の値にアクセスして、両方の値が入力されていることを確認します。

Reactive Forms の asyncValidator を使用する

Reactive Forms の asyncValidator オプションを使用して、非同期的に値を検証することもできます。

import { Component } from '@angular/core';
import { FormControl, Validators, AsyncValidatorFn } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input type="text" formControlName="username" [asyncValidator]="usernameValidator">
    <span *ngIf="usernameControl.errors?.uniqueUsername">このユーザー名は既に使用されています</span>
  `,
})
export class AppComponent {
  usernameControl = new FormControl('', [Validators.required], [this.usernameValidator]);

  usernameValidator(): AsyncValidatorFn {
    return (control: FormControl) => {
      return Observable.create((observer) => {
        setTimeout(() => {
          if (control.value === 'taken') {
            observer.error({ uniqueUsername: true });
          } else {
            observer.next(null);
          }
        }, 1000);
      });
    };
  }
}