jeudi 23 février 2017

How to properly use checkboxes and radio in Ionic 2

How to properly use checkboxes and radios in forms of ionic framework 2.
Here is my code below I implemented:
about.html file

<form #addForm="ngForm" novalidate>
<ion-simple-wizard [(step)]="step" [showSteps]="false" (finish)="onFinish()" [finishIcon]="'done-all'" [(stepCondition)]="stepCondition">
  <ion-wizard-step>
    <ion-card class="card-wizard">
      <ion-card-content>
        <ion-card-title text-wrap>Some Checkbox title</ion-card-title>

        <div>
          <ion-list>
            <ion-item>
              <ion-label>Value 1</ion-label>
              <ion-checkbox value="Value 1" [(ngModel)]="test.checkbox_one" [ngModelOptions]="{standalone: true}"></ion-checkbox>
            </ion-item>
          </ion-list>
        </div>

        <button ion-button outline (click)="toggle()">Press to Continue</button>
      </ion-card-content>
    </ion-card>
  </ion-wizard-step>
</ion-simple-wizard>


about.ts file

export class AboutPage {
  test: {checkbox_one?: string} = {};
   constructor(
    public platform: Platform,
    public navCtrl: NavController,
    public actionSheetCtrl: ActionSheetController,
    public alertCtrl: AlertController,
    public evts: Events ) { }
   onFinish() {
    console.log("answer",this.test);
   }
}

here response is: {checkbox_one: true}




Aucun commentaire:

Enregistrer un commentaire