How to add form validation for input fields?

Ionic Framework ionic-v3
1

Dear Friends,

I am a newbie in ionic with 1 day experience. I created a page with a form , but I have no idea how to add form validation .

My View file is :

<!--
  Generated template for the Page page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
  <ion-title>
  Ionic3 Server Send Test
  </ion-title>
  </ion-navbar>
 </ion-header>

 <ion-content padding>
  <ion-list>
  <ion-item>
  <ion-label floating>Username</ion-label>
  <ion-input type="text" name="username" [(ngModel)]="data.username"></ion-input>
  </ion-item>

  <ion-label fixed>Local Body</ion-label>
  <ion-list radio-group [(ngModel)]="data.localbody">

  <ion-item>
    <ion-label>Corporation</ion-label>
    <ion-radio value="corporation" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Municipality</ion-label>
    <ion-radio value="municipality"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Panchayath</ion-label>
    <ion-radio value="panchayath"></ion-radio>
  </ion-item>
</ion-list>

<ion-item>
  <select ng-model="data.color">
        <option value="">Select</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
  </select>
</ion-item>


  <button ion-button block (click)="submit()">Submit</button>
  </ion-list>

  <ion-card>
  <ion-card-header>
  Response
  </ion-card-header>

  <ion-card-content>
  <b>{{data.response}}</b>
  </ion-card-content>
  </ion-card>
 </ion-content>

its corresponding type script page is:

<!--
  Generated template for the Page page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar>
  <ion-title>
  Ionic3 Server Send Test
  </ion-title>
  </ion-navbar>
 </ion-header>

 <ion-content padding>
  <ion-list>
  <ion-item>
  <ion-label floating>Username</ion-label>
  <ion-input type="text" name="username" [(ngModel)]="data.username"></ion-input>
  </ion-item>

  <ion-label fixed>Local Body</ion-label>
  <ion-list radio-group [(ngModel)]="data.localbody">

  <ion-item>
    <ion-label>Corporation</ion-label>
    <ion-radio value="corporation" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Municipality</ion-label>
    <ion-radio value="municipality"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Panchayath</ion-label>
    <ion-radio value="panchayath"></ion-radio>
  </ion-item>
</ion-list>

<ion-item>
  <select ng-model="data.color">
        <option value="">Select</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
  </select>
</ion-item>


  <button ion-button block (click)="submit()">Submit</button>
  </ion-list>

  <ion-card>
  <ion-card-header>
  Response
  </ion-card-header>

  <ion-card-content>
  <b>{{data.response}}</b>
  </ion-card-content>
  </ion-card>
 </ion-content>

There is one more problem too here . I did not get the value of “Radio button” and “Select box”

please advise

Thanks

Anes

2

See https://ionicframework.com/docs/developer-resources/forms/ for some guidance on this.