How can I handle form validation error messages in Angular?

How can I handle form validation error messages in Angular?

In Angular, you can handle form validation error messages by using reactive forms or template-driven forms. You can display error messages based on the validation status of each form control.

Can you give me an example of how to implement this?

Sure! For a reactive form, you can use the FormGroup and FormControl classes. Here's a simple example:

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

this.myForm = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3)]],
});

Then, in your template, you can check for errors:

<div *ngIf="myForm.get('name').invalid && (myForm.get('name').dirty || myForm.get('name').touched)">
  <small *ngIf="myForm.get('name').errors.required">Name is required.</small>
  <small *ngIf="myForm.get('name').errors.minlength">Name must be at least 3 characters long.</small>
</div>

What about template-driven forms?

For template-driven forms, you can use Angular's built-in directives. Here's an example:

<form #myForm="ngForm">
  <input name="name" ngModel required minlength="3" #name="ngModel">
  <div *ngIf="name.invalid && (name.dirty || name.touched)">
    <small *ngIf="name.errors.required">Name is required.</small>
    <small *ngIf="name.errors.minlength">Name must be at least 3 characters long.</small>
  </div>
</form>