Angular FormControl, FormGroup

モデル駆動型フォーム。

foo = new FormControl

fgroup = new FormGroup({
  bar: new FormControl,
  baz: new FormControl,
})

テンプレート部分。
controlsプロパティ、またはgetメソッドで子formControlにアクセスする。

<input type="text" [formControl]="foo">
<form [formGroup]="fgroup">
  <input type="text" formControlName="bar">
  <input type="text" formControlName="baz">
</form>
<div>foo: {{foo.value}}</div>
<div>bar: {{fgroup.controls.bar.value}}</div>
<div>baz: {{fgroup.get('baz').value}}</div>

FormBuilderを使う場合はこうなる。

foo = this.fb.control([''])

fgroup = this.fb.group({
  bar: [''],
  baz: [''],
})