angular / angular/components

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

Open
#2,810 13 comments 23 reactions 0 assignees View on GitHub
area: material/input feature needs: discussion P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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](https://material.io/guidelines/patterns/errors.html), there seems to be a standard behavior of inlining form error message into the hint area (with a specific color).

screen shot 2017-01-25 at 6 58 03 pm

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

screen shot 2017-01-25 at 6 59 02 pm

#### 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](https://material.io/guidelines/patterns/errors.html) 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?

Contributor guide

Open the contributing guide

Research direction

Start with the Material Error Patterns reference and Angular’s @angular/forms integration described in the issue. Since no file or test is named, identify the framework entry points and define coverage for automatic error/status display, hint separation, and the requested visual treatment; done means the behavior is provided at framework level rather than duplicated per input.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.