LoginSignup
1
2

More than 3 years have passed since last update.

【angular】FormBuilderの使い方

Posted at

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({
      名前:初期値,
      名前:初期値
    });
  }
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2