Adding check boxes, drop-downs and radio buttons toForm in Angular

Introduction

We will learn how to add different types of fields such as checkboxes, radio buttons, and drop-downs, etc in a form. The different fields are required when we create real-time forms. 

Adding Checkbox to Form

We will add a checkbox to the form using the input type as a checkbox itself. We will add using the bootstrap class checkbox. We will add checkbox in our form as follows. We will add the ngModel directive to register the control within our form. We need to specify the name attribute as well. We will display the value of the form using f.value. 

<form #f="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="name" #name="ngModel" type="text" class="form-control">
</div>
<div class="form-group">
<label for="reviews">Reviews</label>
<textarea id="reviews"  [(ngModel)]="reviews" #reviews="ngModel" class="form-control"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ngModel name="isSuspend" #suspend="ngModel">
Suspend timer
</label>
</div>
<div>{{ f.value | json }}</div>
<button class="btn btn-primary">Submit</button>
</form>

We will see that in f.value we will get key-value pairs. We will see that isSuspend will be the key value and initially, its value will be null. If we check the checkbox, the value will be true and on unchecked the value will become false.

Adding Drop-down to Form

We will add a drop-down in our form using <select> and <option> tags. We will design a drop-down for selecting a country in our form. We will have a countryList object in our ts file as follows. We will display this list in our template using *ngFor directive.


import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-form',
  templateUrl: './app-form.component.html',
  styleUrls: ['./app-form.component.scss']
})
export class AppFormComponent {
countryList = [
{id:1, name:"India"},
{id:2, name:"US"},
{id:3, name:"Japan"}
];
  constructor( ) {
  }

submit(f){
   console.log(f); // Logs this object on the console
}
}

Now we will print the list by writing the below code:

<form #f="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="name" #name="ngModel" type="text" class="form-control">
</div>
<div class="form-group">
<label for="reviews">Reviews</label>
<textarea id="reviews"  [(ngModel)]="reviews"  #reviews="ngModel" class="form-control"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ngModel name="isSuspend">
Suspend timer
</label>
</div>
<div class="form-group">
<label for="country"></label>
<select name="country" ngModel id="country" class="form-control">
<option *ngFor="let c of countryList" value="countryList.id">{{ c.name }}</option>
</div>
<div>{{ f.value | json }}</div>
<button class="btn btn-primary">Submit</button>
</form>

Now if we want to pass the complex object in value then we will use [ngValue] instead of value. If we want to set the value property to a complex object such as countryList object here. So we want to send the object with id and name both. In such cases, use ngValue property.

<div class="form-group">
<label for="country"></label>
<select name="country" ngModel id="country" class="form-control">
<option *ngFor="let c of countryList" [ngValue]="countryList">{{ c.name }}</option>
</div>

Adding Radio buttons to Form

Radio buttons always allow only one option to be selected. So we keep a radio-button in a group and in that we will have only one selected option. 

<form #f="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input id="name" [(ngModel)]="name" #name="ngModel" type="text" class="form-control">
</div>
<div class="form-group">
<label for="reviews">Reviews</label>
<textarea id="reviews"  [(ngModel)]="reviews"  #reviews="ngModel" class="form-control"></textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ngModel name="isSuspend">
Suspend timer
</label>
</div>
<div class="form-group">
<label for="country"></label>
<select name="country" ngModel id="country" class="form-control">
<option *ngFor="let c of countryList" value="countryList.id">{{ c.name }}</option>
</div>
<div class="radio">
<label>
<input type="radio" ngModel name="gender" value="1">Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" ngModel name="gender" value="2">Female
</label>
</div>
<div>{{ f.value | json }}</div>
<button class="btn btn-primary">Submit</button>
</form>

We have added two radio buttons to select gender in the form. If the user selects Male the value of the gender is 1. If the female is selected, the value will be 2. We can use *ngFor also to render the radio buttons in our template.

Comments