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);

}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akbar Sheikh

Software Developing is my hobby and want to learn more things everyday just like you