Angular Validations

In Angular, Form validation allows us to enforce data integrity and ensure user input meets specific requirements.

Form validation can be achieved using both template-driven forms and reactive forms.

Overview of Form Validation in Angular:

Built-in Validators: Angular provides a set of built-in validators such as required, minLength, maxLength, pattern, email, etc., for common validation scenarios. These validators can be applied to form controls directly in the template or programmatically in reactive forms.
Custom Validators: Angular allows us to define custom validators to implement custom validation logic for complex validation requirements. Custom validators are functions that take a form control as input and return an object with validation errors if the validation fails.
Validation State: Angular forms maintain a validation state for each form control, indicating whether the control is valid, invalid, or pending validation. We can access the validation state and display validation feedback dynamically based on the control's state.
Form Submission: Angular forms prevent form submission if the form is invalid, ensuring that only valid data is submitted to the server. We can disable the form submission button or provide feedback to users to correct validation errors before submitting the form.

Template-driven form validation:

Template-driven forms rely on directives like "ngModel" for two-way data binding and built-in Angular validation directives.

In Template:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">

  <input type="text" name="name" ngModel required>

  <div *ngIf="myForm.controls['name'].invalid && (myForm.controls['name'].dirty || myForm.controls['name'].touched)">
    <div *ngIf="myForm.controls['name'].errors.required">Name is required.</div>
  </div>

  <button type="submit">Submit</button>

</form>

"ngModel" directive is used for two-way data binding.
"required" attribute is used for basic validation.
"Error messages" are displayed based on form control states.

Reactive form validation:

Reactive forms involve creating form controls programmatically in the component class and defining validators for each form control.

Reactive forms are model-driven and use the FormGroup, FormControl, and FormBuilder classes to create form models programmatically. Validation rules are defined using validators provided by the `@angular/forms` module and applied to form controls using the Validators class.

In Component:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      age: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // Form is valid, proceed with submission
    } else {
      // Form is invalid, handle accordingly
    }
  }
}

In Template:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">

  <input type="text" formControlName="name">
  <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
    <div *ngIf="myForm.get('name').errors.required">Name is required.</div>
  </div>

  <input type="text" formControlName="age">
  <div *ngIf="myForm.get('age').invalid && myForm.get('age').touched">
    <div *ngIf="myForm.get('age').errors.required">Age is required.</div>
  </div>

  <button type="submit">Submit</button>

</form>

"formControlName" is used to bind the input field to the form control.
"Validators" are defined using "Validators.required" marked the field is required.
"Error messages" are displayed based on form control states.

<-- Angular Tables

Angular Services -->