Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use <md-error> in Angular Material 2?

I am trying to display an error message when a required input is not valid in Angular Material 2. There is an example in the Angular Material demo app :

<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>

Expected result

Unfortunately when I try to do the same, I get :

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.

What am I supposed to do to use <md-error>?

like image 563
Wenneguen Avatar asked Mar 29 '17 10:03

Wenneguen


1 Answers

Have you added MaterialModule to your appModule?

ie

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

Update:

md-error is a new directive that hasn't been released yet (as of beta.2) it will probably be part of the next release, I guess. More information can be found here: https://github.com/angular/material2/pull/3560

Meanwhile you can use md-hint.

like image 180
fredrik Avatar answered Nov 19 '22 23:11

fredrik