Client side validation in Angular form for empty fields

Question

I have created a login page with form tag, I want client side validation when user click Submit button, but nothing happens, Checkform method is not getting fired. This is my code

 <div>
    <form class="login">
      <p class="title">Log in</p>
      <input type="text" class="form-control id="username" id="txtUsername" required>
      <div class="invalid-feedback">
        Please provide Username
      </div>
      <input  class="form-control type="text" id="email" id="txtPass" required>
      <div class="invalid-feedback">
        Please provide Password
      </div>
      <br>            
      <button type="button" onclick="Checkform()">
        <span class="state">Log in</span>
      </button>
    </form>
 </div>

I have added bootstrap classes for validation and also a method in .ts file which should fire when I click on submit button

 <div class="invalid-feedback">
     Please provide Username
 </div>

 <div class="invalid-feedback">
    Please provide Password
 </div>

  Checkform(){
    var form = document.getElementsByClassName('login')[0] as HTMLFormElement;
    if (form.checkValidity() === false) {
      
    }
    form.classList.add('was-validated');
  }

How can I make client side validation for empty fields and fire a method when user click on Submit button ?

Any reason not to use angular forms here? You'll get this functionality for free angular.io/guide/forms-overview — Andrew Allen
– Andrew Allen, Commented Nov 3, 2022 at 16:05

Arvind Chourasiya · Accepted Answer · 2022-11-07 11:56:25Z

Client side validation I have fixed using Reactive forms. Its easy to develop 😀

First add ReactiveFormsModule in imports section in the app.modules.ts file. In your component.ts file write below code

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class HomeComponent implements OnInit {

  loginForm :FormGroup;
  submitted=false;
  constructor(private formBuilder: FormBuilder) { 
    this.initializeForm();
  }

  initializeForm()
  {
    this.loginForm = this.formBuilder.group({
      userName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
    }); 
  }

  UserLogin()
  {
    this.submitted = true;
    if(this.loginForm.invalid)
    {
      return
    }
  }
}

This is how you can design component.html file

<form [formGroup]="loginForm" (ngSubmit)="UserLogin()">

    <div class="form-group">
      <input type="text" class="form-control" [ngClass]="{'is-invalid' :submitted && loginForm.controls['userName'].errors}"
       formControlName="userName" placeholder="Username">
    </div>
    
    <div class="form-group">
      <input type="text" class="form-control mt-2" [ngClass]="{'is-invalid' :submitted && loginForm.controls['email'].errors}" 
      formControlName="email" placeholder="Email">
    </div> 
    
    <button class="btn btn-primary" type="submit">
       <span class="state">Log in</span>
    </button>
    
</form>

Inside initializeForm() we have userName and email, these names should be the formControlName in .html file. You can add as many as fields you need. This is how login page looks like

If you want detailed information visit this.

ahmad-g-mustafa · Accepted Answer · 2023-03-14 11:52:59Z

0

also, it's a good thing to disable the login or submit button if the form is not valid

<button type="submit"  [disabled]="!loginForm.valid">
       Submit
</button>

answered Mar 14, 2023 at 11:52

ahmad-g-mustafa

594 bronze badges

Collectives™ on Stack Overflow

Client side validation in Angular form for empty fields

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related