Angular 4 Forms Tutorial – A 5 Minutes WalkThrough

0

Our web application mostly depends on their HTML and mostly on forms that you develop to interact with users for entries. Therefore, I thought let me share a walkthrough on angular 4 forms tutorial.

Getting Started With Angular 4 Forms Tutorial

Forms are immensely important when you building the business applications. Login, Sign-up, Place Order, there are a lot of interactions happens through forms only in most of the web application.

That’s why it’s very important to give user-friendly forms to users. Like UI, form interactions while saving data, validations are the aspects that need to be taken care while developing forms to attracts the users.

Types of forms in Angular 4

There are basically two types of forms angular provide. One is template driven and other is reactive approach.

1. Template driven forms

As name suggests, this type of forms is highly dependent on the template of the app.

Let’s create a simple HTML form.

Here, you can see that we have used ngSubmit method to call a component method.

Plus, we have used reference variable to pass the form object.

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
    <div class="form-group">
      <label>First Name</label>
      <input type="text"
             class="form-control"
             ngModel
             name="firstName">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text"
             class="form-control"
             ngModel
             name="lastName">
    </div>
    <div>
      <button type="submit">Submit</button>     
    </div>
</form>

Here, in the component you should have method to get the data once form submitted.

See you browser’s console log, it will show the full object of your HTML form passed by Angular.

onSubmit(form: NgForm){
  console.log(form);
}

Let’s see how we can apply validations.

It’s a template driven approach, so everything is completely dependent on the template only.

Here, we’ve applied required and take firstName as reference.

 <input type="text"
             class="form-control"
             [(ngModel)]="model.firstName"
             name="firstName"
             #firstName="ngModel"
             required/>

We can show the validation errors by using vaild and touched methods of Angular itself.

<span *ngIf="!firstName.valid && firstName.touched">
Please enter first name!
</span>

2. Model driven forms

As name suggests, this type of forms is driven by model (i.e. components) in angular 4.

It also known as reactive approach.

Let’s see how reactive approach is different from Template driven approach

This approach is generally used to create model-based forms. Here, it’s different than the template-driven approach.

Two things mainly used are FormGroup and FormControl to generate the elements.

You might aware about this tactic, if you’re generally using MVC architecture to generate HTML forms and their validations.

<h2>Welcome to the Angular 4 Forms Tutorial</h2>
<form [formGroup]="simpleForm" (ngSubmit)="saveData()">
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="name">Name: </label>
      <input type="text" formControlName="name" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('name').valid && simpleForm.get('name').touched">Please enter name.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="desc">Desc: </label>
      <input type="text" formControlName="desc" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('desc').valid && simpleForm.get('desc').touched">Please enter desc.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="age">Age: </label>
      <input type="text" formControlName="age" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('age').valid && simpleForm.get('age').touched">Please enter age.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="form-group">
      <label for="school">School: </label>
      <input type="text" formControlName="school" class="form-control">
    </div>
    <p class="help-block" *ngIf="!simpleForm.get('school').valid && simpleForm.get('school').touched">Please enter school.</p>
  </div>
</div>
<div class="row">
  <div class="col-md-10">
    <div class="form-group">
      <button class="btn btn-primary" type="Submit" [disabled]="!simpleForm.valid">Submit</button>
    </div>  
  </div>
</div>
</form>
</div>

Let’s create a component that drives the forms dynamically

In component, we’ve used FormGroup to have a list of FormControls inside.

Amazing thing is, we can use the in-built validators here to provide the validation to the form from component only.

ngOnInit() {
  	this.simpleForm = new FormGroup({
  		'name': new FormControl(null, Validators.required),
  		'desc': new FormControl(null, Validators.required),
  		'age': new FormControl(null, Validators.required),
  		'school': new FormControl(null, Validators.required),
  	});
}


Here, don’t forget to inject the required dependencies like FormModule, FormGroup and FormControl.

I’d suggest to visit,

To conclude and summarize the story,

  • Here, you understood the forms important in web application.
  • And e got an idea about types of forms approaches angular 4 have.
  • Finally, we understand the difference between template and reactive approach.

I hope, you love this article. Feel free to share your questions/suggestions by commenting below.

Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of