How to do Client side validation in Angular form for empty fields-CodePudding

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 >
      <p >Log in</p>
      <input type="text" username" id="txtUsername" required>
      <div >
        Please provide Username
      </div>
      <input  text" id="email" id="txtPass" required>
      <div >
        Please provide Password
      </div>
      <br>            
      <button type="button" onclick="Checkform()">
        <span >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 >
     Please provide Username
 </div>

 <div >
    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 ?

CodePudding user response：

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