Integration with Angular Material
The standard way to display validation error messages in Angular Material is to use a
mat-error element. To use ngx-valdemort with Angular Material, you simply need to put the
val-errors component inside
The standard layout of Material form fields doesn't leave enough room to display more than one error message, so you should configure ngx-valdemort to only display one error message.
mat-error only displays its content if the control is invalid, and if it's touched or if its form is submitted. The strategy is thus the exact same one as the default strategy of ngx-valdemort. You should thus not change the
shouldDisplayErrors strategy of ngx-valdemort. Or you can change it to always return true to spare a few CPU cycles, since the containing
mat-error already does the job of hiding errors.
Since Material 15, at least with the default theme, it seems that
mat-error expects elements displayed inside it to be inline elements, otherwise a large margin appears on top of the error message. So the
div generated by
val-errors should be made inline by adding a CSS rule in your global stylesheet. An alternative is to provide an
errorClasses in the configuration of ngx-valdemort.