Add guidance for styling invalid inputs

[Pixcell]

Note: for support questions, please use one of these channels:
https://github.com/angular/material2/blob/master/CONTRIBUTING.md#question.
This repository's issues are reserved for feature requests and bug reports.

• Do you want to request a feature or report a bug?
  Feature
• What is the current behavior?
  The only class available on md-input is .md-focused
• If the current behavior is a bug,
  please provide steps to reproduce and if possible a minimal demo of the problem
  via https://plnkr.co or similar.
• What is the expected behavior?
  It would be great if the classes of ngControl could be transfered to the md-input label and the md-input underline, in order to display live return on the validity of inputs
• What is the motivation / use case for changing the behavior?

Better User experience

• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?
  Please also test with the latest stable and snapshot versions.
• Other information
  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

[cschroeter]

import {Directive, HostBinding} from '@angular/core';

@Directive({
    selector: '[input-error]'
})
export class InputErrorDirective {

    @HostBinding('attr.dividerColor')
    get isValid() {
         // Checks..
         return 'warn';
    }
}

The @HostBinding or better the setAttribute() function is not case-sensitive. This results in

<md-input [...] dividercolor="warn"></md-input> 

and unfortunately this don't work.

Any ideas?

[leocaseiro]

For the time being, I'm using a md-hint to show my error messages:

<md-input>
    <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMessage}}</md-hint>
</md-input>

It might help someone

[csabattilas]

Is there a class we can use linked to theming?

[leocaseiro]

@krigton You can use the SASS md-color for theming,

.unicorn-carousel {
    color: md-color($warn);
}

see more on the guide

[csabattilas]

so no class already there for errors? we can put what we want?