Template form Validation Angular

Hi Guys Today I am going for Form Validation in Angular .In Below Examples we are using bootstrap to design our form

Create a Login Component using ng g c pages/login as this command will generate a login component for you

Now we are going to implement the form as below

<h2 class=”display-3 text-success mt-5 “>Welcome to Todo Springboot Application</h2>

<div class=”container mt-5">

<div class=”row”>

<div class=”col-6">

<div class=”card p-5 bg-light “>

<h2 class=”fs-2 text-success text-xl-center”>Login</h2>

<form #loginForm=”ngForm” (ngSubmit)=”submit(loginForm)” class=”w-90">

<div class=”form-group “>

<label class=”fs-3 text-success”>Email</label>

<input type=”email” class=”form-control mt-2 form-control-lg “ placeholder=”Email”

[(ngModel)]=”authData.email” name=”email” #email=”ngModel”

[ngClass]=”{‘is-invalid’:email.errors && email.touched}” required

pattern=”[a-z0–9!#$%&’*+/=?^_`{|}~-]+(?:\.[a-z0–9!#$%&’*+/=?^_`{|}~-]+)*@(?:[a-z0–9](?:[a-z0–9-]*[a-z0–9])?\.)+[a-z0–9](?:[a-z0–9-]*[a-z0–9])?” />

<div class=”invalid-feedback” [hidden]=”!email.errors?.[‘required’]”>

Email is Required.

</div>

<div class=”invalid-feedback” [hidden]=”!email.errors?.[‘pattern’]”>

Email is invalid

</div>

</div>

<div class=”form-group”>

<label class=”fs-3 text-success”>Password</label>

<input type=”password” class=”form-control form-control-lg” placeholder=”Password”

[(ngModel)]=”authData.password” name=”password” #password=”ngModel”

[ngClass]=”{‘is-invalid’:password.errors && password.touched}” required minlength=”8" />

<div class=”invalid-feedback” [hidden]=”!password.errors?.[‘required’]”>

Password is required.

</div>

<div class=”invalid-feedback” [hidden]=”!password.errors?.[‘minlength’]”>

Password must be at least 8 characters

</div>

</div>

<div class=”text-center”>

<button [disabled]=”!loginForm.form.valid” class=”btn btn-dark btn-lg mt-3">Login</button>

</div>

</form>

</div>

</div>

</div>

</div>

In component.ts file we will get the value value Now you can use the from for verification

submit(e: any) {

console.log(e.form.value.email);

console.log(e.form.value.password);

}