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

.invalid-feedback {
  display: block;
}

app.component.ts

import { ValdemortConfig } from 'ngx-valdemort';

[...]

export class AppComponent {
  constructor(valdemortConfig: ValdemortConfig) {
    valdemortConfig.errorsClasses = 'invalid-feedback';
  }
}

your-form.component.html

<div class="mb-3">
  <label class="form-label">Email</label>
  <input formControlName="email" class="form-control" type="email" />
  <val-errors controlName="email" label="The email"></val-errors>
</div>

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