Angular バリデーションエラー表示

ngModel経由なら、input要素のvalue, error とも取得できる。

<input #foo="ngModel" [(ngModel)]="metas.foo" required>
<div>value: {{foo.value}}</div>
<div>error: {{foo.errors?.required}}</div>

export class AppComponent {
  metas = {
    foo: '',
    bar: '',
    baz: '',
  }
}

ngForm経由では、input要素のvalueは取得できても、errorは取得できないっぽい。
(Form全体のエラーは取得できる。)

<form #metaForm="ngForm">
<input name="foo" [(ngModel)]="metas.foo" required>
</form>
<div>value: {{metaForm.value.foo}}</div>
<div>error: {{metaForm.invalid}}</div>