Components: md-hint add color property

[tydanielson]

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.

[sumpton]

<md-text> would be a terrific addition to work along with <md-hint>

I have been refactoring hundreds of Bootstrap 4 fields to Material 2, and I appreciate <md-hint> very much. The positioning is also very useful.

But for validation messages I have been moving <div> out of the form-control, and wish there was a more direct and elegant Material component for Bootstrap's <... class="form-text"> that could be used for all the form components.

[devversion]

Good idea. While I was thinking about the color property on md-hint I noticed that we often repeat the same logic to apply the color classes.

A good solution would be having a directive that is responsible for the color classes. Need to discuss first.

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

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

[JoshMarler]

@gvlekke I agree with this being a good idea. Thanks for the css snippet. Helped me style my validation in the manner I required. Spent longer than I care to admit messing around having missed ng-dirty / ng-invalid overrides...

For those interested as of 2.4.6 relevant css is:

md-input-container.ng-touched.ng-invalid {

  .mat-input-placeholder {
    color: red;
  }

  .mat-input-underline {
    border-top-width: 2px;
    border-color: red;
  }

  .mat-input-ripple {
    background-color: red;
  }

  md-hint {
    color: red;
  }
}

[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);
    }
}

[niwrA]

I currently don't use any forms, just md-inputs (all inputs are hooked up to immediate updates on blur to the backend), and the first thing I did was try to add a color property to md-hint, so it certainly would feel a natural solution. Alternatively following the standard ng-dirty etc. would be great too of course.

[mmalerba]

This isn't something that's in the Material Design spec and we already have mat-error for showing error color messages. I don't think its a feature we'll add, though it should be easy enough for users to add by using CSS and Angular Material's theming system (see https://material.angular.io/guide/theming-your-components)

[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._}