Skip to content

Commit 59847d9

Browse files
committed
Add documentation
1 parent 2541558 commit 59847d9

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

src/lib/input/input.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,25 @@ The underline (line under the `input` content) color can be changed by using the
8585
attribute of `md-input-container`. A value of `primary` is the default and will correspond to the
8686
theme primary color. Alternatively, `accent` or `warn` can be specified to use the theme's accent or
8787
warn color.
88+
89+
### Custom Error Matcher
90+
91+
By default, error messages are shown when the control is invalid and the user has interacted with
92+
(touched) the element or the parent form has been submitted. If you wish to customize this
93+
behavior (e.g. to show the error as soon as the invalid control is dirty), you can use the
94+
`errorStateMatcher` property of the input container. To use this property, create a function in
95+
your component class that accepts an `NgControl` and returns a boolean. A result of `true` will
96+
display the error messages.
97+
98+
```html
99+
<md-input-container [errorStateMatcher]="myErrorStateMatcher">
100+
<input mdInput [(ngModel)]="myInput" required>
101+
<md-error>This field is required</md-error>
102+
</md-input-container>
103+
```
104+
105+
```ts
106+
function myErrorStateMatcher(control: NgControl): boolean {
107+
return control.invalid && control.dirty;
108+
}
109+
```

0 commit comments

Comments
 (0)