We can use basic validation in html…

..you can see that the field is required and must be 3 characters minimum length.

This and more complex validators can be defined in the code instead making the system more flexible..

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

export class OurComponent implements OnInit {
   customerForm: FormGroup;
   customer: Customer = new Customer();

   constructor(private fb: FormBuilder) { }

   ngOnInit(): void {
      this.customerForm = this.fb.group({
         firstName: ['default',[Validators.required, Validators.minLength(3)]]
      });
   }
}

This might not look very exciting as we’ve just moved the validation from the Template to the code but as we add more validators and more complex validation we start winning bigger.