web-dev-qa-db-ja.com

Angular Material 2で<md-error>を使用する方法は？

Angular Material 2で必要な入力が無効な場合にエラーメッセージを表示しようとしています。 AngularMaterialデモアプリ に例があります：

<form novalidate>
  <h4>Inside a form</h4>

  <md-input-container>
    <input mdInput name="example" placeholder="example"
      [(ngModel)]="errorMessageExample3" required>
    <md-error>This field is required</md-error>
  </md-input-container>

  <button color="primary" md-raised-button>Submit</button>
</form>

期待される結果

残念ながら、同じことをしようとすると、次のようになります。

Unhandled Promise rejection: Template parse errors:
'md-error' is not a known element:
1. If 'md-error' is an Angular component, then verify that it is part 
   of this module.
2. If 'md-error' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' 
   to the '@NgModule.schemas' of this component to suppress this message.

<md-error>を使用するにはどうすればよいですか？

angularangular-materialangular-material2
8
Wenneguen

AppModuleにMaterialModuleを追加しましたか？

すなわち

@NgModule({
    imports: [
        ...
        MaterialModule
    ],
    ...
})

更新：

md-errorはまだリリースされていない新しいディレクティブです（beta.2の時点で）、おそらく次のリリースの一部になると思います。詳細については、こちらをご覧ください： https://github.com/angular/material2/pull/356

その間、md-hintを使用できます。

6
fredrik