Angular 12 reactive form validation (sample project)

    ----- html

          <form [formGroup]="userLoginForm" class="col s12 white"

            (ngSubmit)="loginC(this.f.userName.value,this.f.passWord.value)" novalidate>

            <div class="form-group mb-3">

              <label class="form-label text-secondary">User Name</label>

              <input class="form-control" type="text" formControlName="userName" name="nameuserName" id="iduserName" />

            </div>

            <div class="form-group mb-3">

              <label class="form-label text-secondary">Password</label>

              <input class="form-control" type="password" formControlName="passWord" name="namepassWord"

                id="idpassWord" /></div>

            <div class="row">

              <div class="input-field col s12">

                <button class="btn btn-info mt-2" type="submit" [disabled]="!userLoginForm.valid">Login</button>

              </div>

            </div>

            <!-- valid messages-->

            <div

            *ngIf="!f.userName?.valid && (f.userName.dirty

            ||f.username.touched)">

              User Name is not valid

          </div>

          <div

          *ngIf="!f.passWord.valid && (f.passWord.dirty

          ||f.passWord.touched)">

            PassWord is not valid

        </div>

          </form>

-- ts

import { Component, OnInit } from "@angular/core";

import { FormControl, FormGroup, RequiredValidator, Validators, ReactiveFormsModule } from "@angular/forms";

import { User } from "../models/User";

import { LoginService } from "../services/login.service";

import { HttpErrorResponse } from "@angular/common/http";

import { FormBuilder } from "@angular/forms";

import { ActivatedRoute, Router } from "@angular/router";

@Component({

  selector: "app-login",

  templateUrl: "./login.component.html",

  styleUrls: ["./login.component.css"],

  providers: [LoginService]

})

export class LoginComponent implements OnInit {

  isLoginError : boolean = false;

  userLoginForm = this.formBuilder.group({

    userName: new FormControl("bnm",[Validators.required,Validators.minLength(3) ,

        Validators.maxLength(10), Validators.pattern("^[a-zA-Z]+$")]),

    passWord: new FormControl("",[Validators.required,Validators.minLength(2),Validators.maxLength(6)])

  });

   

  constructor(public loginService: LoginService,  private formBuilder: FormBuilder

    ,private router: Router, private route: ActivatedRoute ) {

     }

  ngOnInit(): void {

  }

    get f() { return this.userLoginForm.controls; }

  public loginC(uname:string,pwd:string) {

     alert("loginC " + "  - uname : " + uname + " - pwd : " + pwd + " - fn : " + this.f.userName.value);

    //  this.router.navigate(["/home"]);

    /* this.loginService.LoginControl().subscribe((data: {}) => {

      alert(data); */

    // });

  }

}