I have a registration page, it contains some inputs and comboboxes. I need to push a toast when any of the comboboxes or inputs are not selected or entered and thet toast should show which is the field or check box that need to be entered.
<ion-header>
<ion-navbar>
<ion-title>Basic Details</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h1 class="h1">Basic Details</h1>
<ion-row>
<ion-col>
<ion-input name="First Name" placeholder="First Name"></ion-input>
</ion-col>
<ion-col>
<ion-input name="Last Name" placeholder="Last Name"></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-input name="Age" placeholder="Age"></ion-input>
</ion-col>
<ion-col>
<ion-datetime displayFormat="MMM DD YYYY" placeholder="Date Of Birth"></ion-
datetime>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-select interface="popover" placeholder="Height">
<ion-option value="nes">4ft 8in</ion-option>
<ion-option value="n64">4ft 9in</ion-option>
<ion-option value="ps">5ft</ion-option>
<ion-option value="genesis">5ft 1in</ion-option>
<ion-option value="saturn">5ft 2in</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Weight(Kgs)">
<ion-option value="nes">48Kgs</ion-option>
<ion-option value="n64">49Kgs</ion-option>
<ion-option value="ps">55Kgs</ion-option>
<ion-option value="genesis">80Kgs</ion-option>
<ion-option value="saturn">85Kgs</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Gender">
<ion-option value="nes">Male</ion-option>
<ion-option value="n64">Female</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-select interface="popover" placeholder="Marital Status">
<ion-option value="nes">Never Married</ion-option>
<ion-option value="n64">Widowed</ion-option>
<ion-option value="ps">Divorced</ion-option>
<ion-option value="genesis">Awaiting Divorce</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Mother Tongue">
<ion-option value="nes">Hindi</ion-option>
<ion-option value="n64">Tamil</ion-option>
<ion-option value="ps">Malayalam</ion-option>
<ion-option value="genesis">English</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Eating Habits">
<ion-option value="nes">Vegetarian</ion-option>
<ion-option value="n64">Non-Vegetarian</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-select interface="popover" placeholder="Smoking Habits">
<ion-option value="nes">No</ion-option>
<ion-option value="n64">Occasionally</ion-option>
<ion-option value="ps">Yes</ion-option>
</ion-select>
</ion-col>
<ion-col>
<ion-select interface="popover" placeholder="Drinking Habits">
<ion-option value="nes">No</ion-option>
<ion-option value="n64">Occasionally</ion-option>
<ion-option value="ps">Yes</ion-option>
</ion-select>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<button ion-button full color="secondary" block>Save</button>
</ion-col>
<ion-col>
<button (click)="nxt()" ion-button full color="primary" block>Next</button>
</ion-col>
</ion-row>
</ion-content>
ts file
import { Component } from '@angular/core';
import { NavController, AlertController, LoadingController, Loading, IonicPage } from 'ionic-
angular';
import { ObsAuthService } from '../../services/obs_auth.services';
import { MatrirelPage } from '../matrirel/matrirel';
@Component({
selector: 'page-matribas',
templateUrl: 'matribas.html',
providers: [ObsAuthService]
})
export class MatribasPage{
constructor(private nav: NavController, private auth: ObsAuthService,
private alertCtrl: AlertController, private loadingCtrl: LoadingController) {
}
selectChange(e) {
console.log(e);
}
public nxt(){
this.nav.push(MatrirelPage);
}
goback() {
this.nav.pop();
}
}