AngulaのFormGroupについて

FormGroup

• AngulaのForm内のタブをグルーピングする

html

• 以下サンプル

<div class="free" [formGroup]="listSearchForm">
  <input
    type="text"
    class="form-control"
    (keyup.enter)="onEnter()"
    formControlName="freeWord"
  />
</div>

component

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

@Component({
  selector: 'app-free-word',
  templateUrl: './free-word.component.html',
  styleUrls: ['./free-word.component.scss'],
})
export class FreeWordComponent implements OnInit, AfterViewInit {
  @Input() listSearchForm: FormGroup;
  @Input() value: string | null;

  constructor() {}

  ngOnInit() {
    this.listSearchForm.addControl('freeWord', new FormControl(this.value, null));
  }

  ngAfterViewInit() {}

  /**
   * enterボタンを押下したら検索する
   */
  onEnter() {
  }

  get freeWord() {
    return this.listSearchForm.get('freeWord');
  }
}