フォームの使い方

Tweet

動的にフォームを生成する方法

component.ts

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

@Component({
  selector: 'app-fields',
  templateUrl: './fields.component.html',
  styleUrls: ['./fields.component.css']
})
export class FieldsComponent implements OnInit {
  form = this.fb.group(
    {
      fields: this.fb.array([
        this.fb.group({
          name: [''],
          type: ['']
        })
      ])
    }
  );


  constructor(private fb: FormBuilder) { }

  get fields() {
    return this.form.get('fields') as FormArray;
  }

  ngOnInit(): void {

  }

  onClick() {
    this.fields.push(this.fb.group({
        name: [''],
        type: ['']
      }));
  }
}

component.html

<p>fields works!</p>
<button (click)="onClick()" type="button">フィールド追加</button>
<div [formGroup]="form">
  <div formArrayName="fields">
    <div *ngFor="let field of fields.controls; index as i">
      <div [formGroupName]="i">
        <div>フィールド名: <input type="text" formControlName="name"></div>
        <div>型: <input type="text" formControlName="type"></div>
      </div>
    </div>
  </div>
</div>

fromGroupNameは、単純なフォームなら以下のようにフォームグループの名前を書く。

今回は、フォームグループが配列なので、名前がインデックスになっているため、iをformGroupNameの名前としている。