Angular 4 入力値取得方法

Angular 4における入力値の取得

Angular 4において、入力要素（<input>, <textarea>, 等）の値を取得する方法は、主に2つあります。

テンプレート駆動フォーム（Template-Driven Forms）

• フォーム要素に ngModel をバインドし、その値をコンポーネントのクラスプロパティに結び付けます。
• ngModel指令を使用します。

<input type="text" [(ngModel)]="name">

export class MyComponent {
  name: string = '';
}

• name プロパティに input 要素の値が自動的に更新されます。

リアクティブフォーム（Reactive Forms）

• フォームグループにコントロール（FormControl）を追加し、それらの値を操作します。
• FormBuilder を使用してフォームグループを作成します。

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

@Component({
  selector: '   app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyCo   mponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      nam   e: ''
    });
  }
}

<form [formGroup]="myForm">
  <input type="text" formControlName="name">
</form>

• name コントロールの値を取得するには、myForm.get('name').value を使用します。

テンプレート駆動フォーム

HTML

<input type="text" [(ngModel)]="name">

TypeScript

export class MyComponent {
  name: string = '';
}

• [(ngModel)]="name": input 要素の値を name プロパティに双方向バインドします。

リアクティブフォーム

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

@Component({
  selector: '   app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyCo   mponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      nam   e: ''
    });
  }
}

<form [formGroup]="myForm">
  <input type="text" formControlName="name">
</form>

• myForm.get('name').value で name コントロールの値を取得できます。
• formControlName="name": input 要素を name コントロールにバインドします。

直接DOMアクセス

• 最後の手段として、どうしても他の方法では実現できない場合にのみ使用してください。
• 最も直接的な方法ですが、Angularのライフサイクルや変更検出の仕組みを無視するため、一般的には推奨されません。

import { ElementRef } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  constructor(private el: ElementRef) {}

  getValue() {
    const inputValue = this.el.nativeElement.value;
    console.log(inputValue);
  }
}

カスタムディレクティブ

• ディレクティブ内で入力値を取得し、必要な処理を行います。
• 特定の入力要素やバリデーションロジックを再利用したい場合に便利です。

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appMyDirective]'
})
export class MyDirectiv   e {
  @Input() appMyDirective: string;

  constructor(private el: ElementRef) {}

  ngOnInit() {
    const inputValue = this.el.nativeElement.value;
    // ここで入力値を処理
  }
}

ViewChild

• @ViewChild デコレータを使用して、子要素の参照を取得し、その入力値を操作します。
• コンポーネント内の子要素にアクセスしたい場合に使用します。

import { Component, ViewChild } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  @ViewChild('myInput') myInput: ElementRef;

  getValue() {
    const inputValue = this.myInput.nativeElement.value;
    console.log(inputValue);
  }
}