File tree Expand file tree Collapse file tree 1 file changed +22
-0
lines changed Expand file tree Collapse file tree 1 file changed +22
-0
lines changed Original file line number Diff line number Diff line change @@ -85,3 +85,25 @@ The underline (line under the `input` content) color can be changed by using the
8585attribute of ` md-input-container ` . A value of ` primary ` is the default and will correspond to the
8686theme primary color. Alternatively, ` accent ` or ` warn ` can be specified to use the theme's accent or
8787warn 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+ ```
You can’t perform that action at this time.
0 commit comments