Integration with Bootstrap 4 or 5

The standard way to display validation error messages in Bootstrap 4 or 5 is to use a .invalid-feedback div next to the input field. However, Bootstrap has a CSS rule that makes such .invalid-feedback divs invisible unless the input field has the class is-invalid or is natively marked invalid using HTML 5 validation.

Since we don't use HTML 5 validation but Angular validation, since Angular doesn't mark the input fields with .is-invalid, and since val-errors is smart enough to hide itself when the field is invalid, the easiest way to deal with this is to override the .invalid-feedback class in your global stylesheet to make sure it's always displayed, and to configure ngx-valdemort to add the invalid-feedback class.

styles.css

app.component.ts

your-form.component.html

This demo is made with Bootstrap 5, so you can see this technique in action in the demos of the home page