Form Validation

// component.ts
userForm = this.fb.group({
  username: ['', [
    Validators.required,
    Validators.minLength(4),
    Validators.maxLength(20)
  ]],
  password: ['', [
    Validators.required,
    Validators.minLength(8)
  ]]
});

get username() {
  return this.userForm.get('username');
}

// component.html
<form [formGroup]="userForm">
  <div>
    <input formControlName="username" placeholder="Username">
    <div *ngIf="username?.invalid && username?.touched">
      <small *ngIf="username?.errors?.['required']">
        Username is required
      </small>
      <small *ngIf="username?.errors?.['minlength']">
        Username must be at least 4 characters
      </small>
    </div>
  </div>
  
  <button [disabled]="userForm.invalid">Submit</button>
</form>