Provide Automatic Binding of FormControl Error Messages and Status to input hints

[arciisine]

Bug, feature request, or proposal:

This is a feature request.

This is related to #348, but is specifically asking for the material guidance to be a part of the framework, integrating with standard functionality of @angular/forms.

What is the expected behavior?

Looking at Material Error Patterns, there seems to be a standard behavior of inlining form error message into the hint area (with a specific color).

It also supports separating the existing hint from the error message via a comma.

What is the current behavior?

Error state and messages are not handled.

What are the steps to reproduce?

There is nothing to show as this is feature that is yet to be implemented. Material Error Patterns should provide the expected behavior and visual treatment.

What is the use-case or motivation for changing an existing behavior?

The general gist is that if everyone were to follow the guidelines from material.io, you would end up with a fair amount of duplicate code for every input. The pervasiveness of the desired functionality seems like a prime candidate for handling at the framework level.

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

All

Is there anything else we should know?

[arciisine]

I would be interested in opening a PR to support this, if the material team thinks this is a valid feature.

[arciisine]

For anyone else looking at this, we have a very simple (not robust) implementation that should help along these lines. Currently its only setup for <md-input-container> but should be pretty easy to extrapolate.

import {
  Directive, ViewContainerRef, OnInit,
  HostListener, ContentChild, AfterViewInit, ContentChildren
} from '@angular/core';
import { NgControl, FormControl } from '@angular/forms';
import { MdInputDirective, MdInputContainer } from '@angular/material';

@Directive({
  selector: 'md-input-container'
})
export class ValidationDirective implements AfterViewInit {

  @ContentChild(MdInputDirective) mdInput;

  constructor(private container: MdInputContainer) { }

  ngAfterViewInit() {
    let ctrl = this.mdInput._ngControl as NgControl;
    if (ctrl === null) {
      // handles when field is not attached to form
      return;
    }
    let ogHint = this.container.hintLabel;
    let formCtrl = ctrl.control;
    // Not an easy way to see what validators are actually on a control, and so we assume if an
    //   empty input produced an error, the field is required
    if (formCtrl && formCtrl.validator) { 
      let res = formCtrl.validator(new FormControl());
      if (Object.keys(res).length > 0) {
        this.mdInput.required = true;
      }
    }
    ctrl.statusChanges.subscribe(() => {
      let messages = [ogHint];

      if (ctrl.invalid) {
        messages.push(...Object.keys(ctrl.errors)
          .map(x => ctrl.errors[x])
          .map(m => m.includes('required') ?
            'This field is required' :
            m));
      }

      let message = messages.filter(x => !!x).join(', ');
      this.container.hintLabel = message;
    });
  }
}

[arciisine]

@kara @mmalerba I see there is a PR #3114 that address part of this issue. Is that to indicate that this ticket will also make it in at some future point, or is that still in the discussion phase?

[mmalerba]

We still need to discuss the error messages part of it.

[iliketomatoes]

If we could have something like this: https://material.angularjs.org/latest/demo/input, it would be awesome.
Thanks!

[natsid]

As the error message feature gets expanded to include other form controls (checkboxes, radio buttons, ...), would it be possible to implement a "group-level" error message, i.e., a message that applies to a group of associated form controls?

Select 'green' in this plunkr to see an example: http://plnkr.co/edit/HhN7ykzp0oM07IGyy4a3?p=preview

[jefersonestevo]

I've developed a component to get and show the error messages from another component. It's pretty straighforward to use, you only need to provide the control (NgModel or FormControl) from the component to it and it will handle the messages. You can even customize the message you want to show for each erro by providing templates with a custom directive.

There are some pros and cons to this approach.

Pros:

• You can easily customize the messages (By using a template for the specific error message)
• The developer will not handle the input controls. The component will do that for you
• It shows the message only when the user has touched the input
• You can use it with any component that implements the form ControlValueAcessor (you may use it outside of the md-input-container) and both in template and reactive forms

Cons:

• As it's another component, you'll have to find a place in your app to put it (probably below the input component itself, but it may change your layout)
• The formControl does not have a "input touched" callback, so I had to "wrap" it so I could be notified when the user touched the element (suppose you have a required field, when the user open the page, it's already invalid but not touched. When the user click the component and leave, the error-messages component must be notified to show the error message)

You can see the demo here:
https://rawgit.com/jefersonestevo/angular-smd/master/dist/index.html#/angular-smd/demo-error-messages

Hopefully this component may help you with some ideas. I'm using it for now.

[mmalerba]

fyi error messages part is in progress: #3560

[mmalerba]

Closing since this has been implemented via <md-error>