Angular FormControl

FormGroup を使わないパターン。

export class AppComponent {
  foo = new FormControl('foo-desu', [
    Validators.required,
  ])
}

<input [formControl]="foo">
<div>value: {{foo.value}}</div>
<div>error: {{foo.errors | json}}</div>

FormGroup を使うパターン。

export class AppComponent {
  constructor(private builder: FormBuilder) {}
  foo = new FormControl('foo-desu', [
    Validators.required,
  ])
  metaForm = this.builder.group({
    foo: this.foo
  })
}

<form [formGroup]="metaForm">
<input [formControl]="foo">
<div>input_value: {{foo.value}}</div>
<div>input_error: {{foo.errors | json}}</div>
<div>form_value: {{metaForm.controls.foo.value}}</div>
<div>form_error: {{metaForm.controls.foo.errors | json}}</div>
</form>