Styles are not being applied if FormField is wrapped by a custom component

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Styles like errors should be applied.

What is the current behavior?

No styles are being applied.

What are the steps to reproduce?

1 - Click on input and then click outside. 2 - No styles are applied to the input, like red placeholder and others.

Providing a Plunker (or similar) is the best way to get the team to see your issue. https://plnkr.co/edit/Y4bkpFX7Wu6VpITnsL5z?p=preview

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

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.4.1
node: 8.1.1
os: linux x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/platform-server: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.4.0
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6
typescript: 2.5.2

[willshowell]

Ah yep, my bad.

Looks like this is relevant

https://github.com/angular/material2/blob/f2cae6e8141c90fa0b62dc8a928f217bc085667b/src/lib/input/input.ts#L187-L198

And here is a hacky way around it

https://plnkr.co/edit/DiQq9z0d08di1lb55oYg?p=preview (workaround from here)

[dev054]

Thanks @willshowell for commenting.

Well, the original plunker is correct. The path can be specified in both getError and hasError methods, like this:

this.formGroup.getError('required', 'password') this.formGroup.hasError('required', 'password')

It’ll call the get method internally, so it works for nested paths… this.formGroup.hasError('required', 'my.nested.path.here')

It’s good to avoid this ugly (IHMO) thing: this.formGroup.get('password').getError('required') this.formGroup.get('password').hasError('required')

Check the source

The control value accessor isn’t missing nothing, I just copied the it from DefaultValueAccessor source. In fact, I could either extends the DefaultValueAccessor and don’t implement nothing.

PS: Your plunker isn’t showing the issue because you forgot to change this:

password has required error? {{ formGroup.get('password').hasError('required', 'password') }}

to:

password has required error? {{ formGroup.get('password').hasError('required') }}

Your plunker working