【angular】FormBuilderの使い方

1.FormBuilderをインポート

import { FormControl, FormGroup, FormBuilder } from '@angular/forms'
FormBuilderというクラスはライブラリ「@angular/forms」に定義されています。

2.FormBuilderの注入

constructor(private fb: FormBuilder) { }
注入という方法でFormBuilderオブジェクトを作成します。
コンポーネントの「コンストラクタ」と呼ばれる初期化処理をする部分に記述します。

全体としてはこうなります↓

component.ts

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

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

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
  }

}

FormBuilder書き方

component.ts

  formGroupプロパティ名:FormGroup; //変数の準備
  constructor(private fb: FormBuilder) { 
    this.formGroupプロパティ名= this.fb.group({
      名前:初期値,
      名前:初期値
    });
  }