I will create a shopping app using ionic 2. In the products details I have created a stepper for increment and decrement value of quantity.
How can I get the input value within ionic 2 in my Component?
-
Could you please add your code, so we can take a look at it and help you with that?sebaferreras– sebaferreras2016-07-18 09:03:21 +00:00Commented Jul 18, 2016 at 9:03
-
I have analyzed the problem, you can see my solution below , thank you.Mahmoud Ismail– Mahmoud Ismail2016-07-18 21:15:46 +00:00Commented Jul 18, 2016 at 21:15
Add a comment
|
2 Answers
Solution:
1- app/pages/index.html
In Angular 2, you should use ngModel in the template.
<ion-header>
<ion-navbar primary>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<button lightgray full (click)="incrementQty()">+</button>
<ion-item>
<ion-input type="number" min="1" [value]="qty" [(ngModel)]="qty"></ion-input>
</ion-item>
<button lightgray full (click)="decrementQty()">-</button>
</ion-item>
</ion-content>
2- app/pages/index.ts
import { Component} from '@angular/core';
import { NavController, Slides} from 'ionic-angular';
@Component({
templateUrl: 'build/pages/titlepage/titlepage.html',
})
export class titlePage {
qty:any;
constructor(private nav: NavController) {
this.qty = 1;
}
// increment product qty
incrementQty() {
console.log(this.qty+1);
this.qty += 1;
}
// decrement product qty
decrementQty() {
if(this.qty-1 < 1 ){
this.qty = 1
console.log('1->'+this.qty);
}else{
this.qty -= 1;
console.log('2->'+this.qty);
}
}
}
1 Comment
kcrisman
This was really a quality answer.
Or as an alternative solution you may use the more appropriate Form controls designed for angular 2. (learn more here )
Example:
Typescript
import {Component, Input} from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl} from '@angular/common';
import {IONIC_DIRECTIVES} from 'ionic-angular';
@Component({
selector: 'chat-form',
templateUrl: '/client/components/chat-form/chat-form.html',
directives: [IONIC_DIRECTIVES, FORM_DIRECTIVES],
pipes: [],
styleUrls: []
})
export class ChatFormComponent {
chatForm:ControlGroup;
messageInput:AbstractControl;
constructor(private translate:TranslateService, private formBuilder:FormBuilder) {
this.chatForm = formBuilder.group({messageInput: ['']})
this.messageInput = this.chatForm.controls['messageInput'];
}
sendMessage() {
console.log('sendMessage: ', this.messageInput.value);
}
}
Template
<form [ngFormModel]="chatForm" (ngSubmit)="sendMessage()">
<ion-input type="text" [ngFormControl]="messageInput" placeholder="{{'chat.form.placeholder' | translate }}"></ion-input>
<button fab>
<ion-icon name="send"></ion-icon>
</button>
</form>
Comments
