Angular Reactive Forms(リアクティブフォーム)の使い方

📋 目次（クリックで展開）

Angular で提供されている Reactive Forms（リアクティブフォーム）の使い方を見てみましょう。

AppModule.ts

Reactive Forms を利用するため、@angular/forms から ReactiveFormsModule をインポートします。

AppModule.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

AppComponent.ts

コンポーネント上では、@angular/forms から FormBuilder をインポートします。 各入力フォームコントロールは FormControl で生成します。そして、これら入力フォームコントロールをまとめ上げるのが、group メソッドの役割です。

AppComponent.ts
import { Component } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'build-test';


  id = new FormControl('');
  password = new FormControl('');


  loginForm = this.fb.group({
    id: this.id,
    password: this.password
  });


  constructor(private fb: FormBuilder) {


  }


  login() {
    console.log('id: ', this.loginForm.get('id').value);
    console.log('password: ', this.loginForm.get('password').value);
  }
}

AppComponent (HTML テンプレート)

HTML テンプレート上では、form タグの formGroup 属性に、コンポーネントで生成した FormGroup(loginForm) を指定します。form タグ配下の入力コントロールには、formControl 属性から FormControl を紐づけます。

AppComponent.html
<form [formGroup]="loginForm" (ngSubmit)="login()">
  <input type="text" [formControl]="id">
  <input type="password" [formControl]="password">
  <input type="submit" value="ログイン">
</form>

ngSubmit に登録されている login() メソッドでは、FormGroup から FormControl を取り出して値を出力しています。

💬 コメント