How can I implement UI feedback for form validators in Angular?

How can I implement UI feedback for form validators in Angular?

You can use Angular's reactive forms along with custom validators to provide real-time UI feedback. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

this.form = this.fb.group({
  username: ['', [Validators.required, this.customValidator]],
});

customValidator(control) {
  return control.value.length < 5 ? { 'minlength': true } : null;
}

You can then display feedback in your template based on the form control's status.

How do I show error messages in the template?

You can use Angular's built-in directives like *ngIf to conditionally display error messages. For example:

<div *ngIf="form.get('username').hasError('minlength')">Username must be at least 5 characters long.</div>