Tuesday 10 October 2017

Disable submit button until all mandatory fields are filled - Angular

Let us check how we can disable submit button of a form until all mandatory fields are filled. Angular folks made these things very simple, before explaining those you can check this link to know how it was in Angular js 1. Let us create a simple form first.


<form (ngSubmit)="onSubmit()">

  <div class="form-group">
    <label for="firstname">First Name</label>
    <input type="text" class="form-control" id="firstname" 
      required [(ngModel)]="firstname" name="firstname">
  </div>

  <div class="form-group">
   <label for="lastname">Last Name</label>
   <input type="text"  class="form-control" id="lastname" 
     [(ngModel)] = "lastname" name="lastname">
  </div>

  <button type="submit">Submit</button>

</form>


Above one is a simple form which has first name and last name and first name we made as mandatory by adding required type. Now see below code which will disable the submit button until mandatory field are filled.


<form (ngSubmit)="onSubmit()" #myForm="ngForm">

  <div class="form-group">
    <label for="firstname">First Name</label>
    <input type="text" class="form-control" id="firstname" 
      required [(ngModel)]="firstname" name="firstname">
  </div>

  <div class="form-group">
   <label for="lastname">Last Name</label>
   <input type="text"  class="form-control" id="lastname" 
     [(ngModel)] = "lastname" name="lastname">
  </div>

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

</form>

Here we have added #myForm="ngForm" to form body and also added [disabled]="!myForm.form.valid" to submit button. Our job is over, angular made us everything easy. Now let us check with some more example. Let us add max length and min length.


<div class="form-group">
 <label for="lastname">Last Name</label>
 <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
</div>

Now let us check with pattern validation, it was ng-pattern in Angular js 1 here is is just pattern.


<div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  minlength = '2' 
  maxlength="10" pattern="^[0-9()\-+\s]+$" [(ngModel)] = "mobnumber" name="mobnumber">
</div>

Basically you don’t need to worry about validation, angular will take care for you.

Full example


<form (ngSubmit)="onSubmit()" #myForm="ngForm">

 <div class="form-group">
  <label for="firstname">First Name</label>
  <input type="text" class="form-control" id="firstname" 
   required [(ngModel)]="firstname" name="firstname">
 </div>

 <div class="form-group">
  <label for="middlename">Middle Name</label>
  <input type="text"  class="form-control" id="middlename" 
   [(ngModel)]="middlename" name="middlename">
 </div>

 <div class="form-group">
  <label for="lastname">Last Name</label>
  <input type="text"  class="form-control" id="lastname" 
   required minlength = '2' maxlength="6" [(ngModel)] = "lastname" name="lastname">
 </div>

 <div class="form-group">
  <label for="mobnumber">Mob Number</label>
  <input type="text"  class="form-control" id="mobnumber"  
   minlength = '2' maxlength="10" pattern="^[0-9()\-+\s]+$" 
   [(ngModel)] = "mobnumber" name="mobnumber">
 </div>

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

</form>

Update the plunker and test your changes.

Dont forgot to import form module.


import { FormsModule } from '@angular/forms';

In this article we have discussed about form validation, basically disabling submit button until all mandatory fields are filled.

Related Info

1. Share data between components using a service file.

2. Create reusable component and share data between them.

3. Angular client side pagination.

4. Angular show more/less pagination

1 comment :

  1. very nice aritical in angular field

    ReplyDelete