md-hint add color property

This is a feature. It would be really nice to use the color property like on md-button to determine which hints are warnings, accents or primary etc… I’m using the hints for both showing validation errors and anything related to the users input.

[gvlekke]

I think it’s also good to have a color option on md-hint, but I think its better that you can set a error color in the theme file. Material2 itself should apply the error color on the hint and the md-input-underline. Just like https://material.io/guidelines/patterns/errors.html#errors-user-input-errors

For now I’m creating a css file that does that based on the ng-dirty and ng-invalid classes.

md-hint
  font-weight: lighter
  color: #A1A1A1

md-input-container.ng-dirty.ng-invalid
  .md-input-underline
    border-top-width: 2px
    border-color: #D50000

    .md-input-ripple
      background-color: #D50000

  md-hint
    color: #D50000

should i create a new issue: “add error styling to inputs” ?

[kamarouski]

Out of the box styling solution for invalid inputs and error messages would be great.

Color property for md-hint would definitely help a lot as everybody now need to write custom css to achieve this common task. Or maybe a separate md-error component.

Hopefully this will be considered before final release.

That’s how I currently style it using theme warn color:

@import '~@angular/material/core/theming/all-theme';
@import './_custom-theme.scss';

.mat-hint {
    &.error {
        color: mat-color($custom-warn);
    }
}