Components: Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'

[douglasrlee]

Bug, feature request, or proposal:

Seems like a bug..

What is the expected behavior?

For errorStateMatcher to bind to an input.

What is the current behavior?

Can't bind to 'errorStateMatcher' since it isn't a known property of 'input'

What are the steps to reproduce?

Using angular material beta 12 and angular 4.4.4

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.4.4
Material 2.0.0-beta.12

Is there anything else we should know?

Just upgraded from beta 11 to beta 12 and with it had to upgrade to angular 4.4.4 but now for some reason I get Can't bind to 'errorStateMatcher' since it isn't a known property of 'input' in the browser console upon navigating to the app.

I have both the forms module and reactive forms module in my application.

[douglasrlee]

html template:

<md-form-field>
  <input
    mdInput
    placeholder='{{ label }}'
    [(ngModel)]='inputValue'
    [errorStateMatcher]='validate.bind(this)' />
  <md-error>
    {{ errorMessage }}
  </md-error>
</md-form-field>

[willshowell]

This was a breaking change in beta.12. Instead of passing a function, you pass a class instance of type ErrorStateMatcher that has an isErrorState method.

[douglasrlee]

What is the better example to follow:
https://material.angular.io/components/input/overview#custom-error-matcher
or
https://github.com/angular/material2/blob/4383f51a58de1fccad2ed64443a5e22ab435c02b/src/demo-app/input/input-demo.ts#L56

or do they both work?

[willshowell]

Either way will work. I don't know which is better practice, but if you need access to some component state, that demo example is definitely the easiest. You can also do some DI trickery if you wish too,

https://github.com/angular/material2/blob/236198376e7fc43f004f1b1014b25d4555459743/src/lib/stepper/stepper.ts#L34-L64

[douglasrlee]

I am still getting the same error using:

validate: ErrorStateMatcher = {
  isErrorState: (control: FormControl) => {
    return true;
  }
};

with

<md-form-field>
  <input
    mdInput
    placeholder='{{ label }}'
    [(ngModel)]='inputValue'
    [errorStateMatcher]='validate' />
  <md-error>
    {{ errorMessage }}
  </md-error>
</md-form-field>

I feel like I am missing something..

[willshowell]

mdInput -> matInput

Same goes for md-form-field

[douglasrlee]

Yep, that did it. Thanks guys!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}