How to apply Required field validation in template driven forms Angular ? 78

 How to apply Required field validation in template driven forms Angular ?

In Angular's template-driven forms, you have several ways to apply required field validation:

1. Using the required attribute:

This is the simplest approach. Add the required attribute directly to the form element you want to make mandatory:

HTML

<input type="text" id="name" [(ngModel)]="user.name" name="name" required>

This tells Angular that the field must have a value for the form to be considered valid.

2. Using the formControlName directive with built-in validators:

This method offers more flexibility and control. Use the formControlName directive to bind the field to a form control name:

HTML

<input type="text" id="name" formControlName="name" name="name">

Then, in your component file, import the Validators class and add the required validator to the form control:

TypeScript

import { Component, Validators } from '@angular/core';

@Component({
  // ...
})
export class MyFormComponent {
  userForm = new FormGroup({
    name: new FormControl('', Validators.required),
    // ... other fields
  });
}

This approach allows you to reuse validators and add multiple validators to a single field.

3. Using custom validators:

For more complex validation rules, you can create custom validators. Define a function that takes the form control value as input and returns an error object if the validation fails:

TypeScript

myCustomValidator(control: FormControl) {
  if (control.value.length < 5) {
    return { 'minlength': { requiredLength: 5, actualLength: control.value.length } };
  }
  return null;
}

Then, register the custom validator in your form control:

TypeScript

name: new FormControl('', [Validators.required, this.myCustomValidator]),

Additional Tips:

• Use the disabled attribute along with required to disable a required field conditionally.

• Leverage directives like ngClass or ngStyle to apply visual cues for required and invalid fields.

• Explore the ValidatorFn interface and the ValidationErrors type for more advanced validation scenarios.

Remember to choose the approach that best suits your specific needs and complexity of your form validation requirements.