File tree 1 file changed +22
-0
lines changed
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
85
85
attribute of ` md-input-container ` . A value of ` primary ` is the default and will correspond to the
86
86
theme primary color. Alternatively, ` accent ` or ` warn ` can be specified to use the theme's accent or
87
87
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
+ ```
You can’t perform that action at this time.
0 commit comments