【Angular】valueChangesでフォームに入力したら動的に値を取得する

2023 9/12

2022年7月6日 2023年9月12日

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Angularでは、フォームに値が入力されたらその値を動的に取得できるようにvalueChangesというメソッドがあります。

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

@Component({
  selector: 'app-user-register',
  templateUrl: './user-register.component.html',
  styleUrls: ['./user-register.component.css']
})
export class UserRegisterComponent implements OnInit {

  public name: FormControl;

  constructor() {}

  ngOnInit(): void {
    this.name = new FormControl('', [
      Validators.required
    ]);
    this.nameValueChanges();
  }

  /**
   * フォームの入力を検知
   */
  public nameValueChanges() {
    this.name.valueChanges.subscribe((value: string) => {
      console.log(value);
    });
  }
}

<ng-container>
    <div>
        <mat-form-field>
            <mat-label>名前</mat-label>
            <input matInput type="text" [formControl]="name" placeholder="ヤマダ"/>
            <mat-error *ngIf="name.invalid">{{ '必須項目です' }}</mat-error>
        </mat-form-field>
    </div>
</ng-container>

コンソールを開いて、適当にフォームに文字を入力してみると、フォームに入力した値を取得できます。