How can I use a ngModel on an ion-radio element? - javascript

I'm trying to implement a ngModel on a ion-radio element but somehow it doesn't work. This is my code:
import {
Page
} from 'ionic-angular';
#Page({
templateUrl: 'build/pages/settings/settings.html'
})
export class Settings {
constructor() {
this.unit = 2;
}
}
<ion-list radio-group>
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1" [(ngModel)]="unit"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" [(ngModel)]="unit"></ion-radio>
</ion-item>
</ion-list>
I've tried implementing it on a ion-input and ion-select and that just works fine. I also tried adding directives: [FORM_DIRECTIVES] to my #Page and added the corresponding import but that doesn't fix the problem.
Any ideas?

Syntax has been changed rewritten now, ngModel should be place with ion-list & radio-group only once. No need to have them there on each ion-radio element.
<ion-list radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2" ></ion-radio>
</ion-item>
</ion-list>
For more information you could visit ionic2 framework forum link

It's working with Ionic 5.
<ion-radio-group value="answer">
<ion-item *ngFor="let item of question?.answers">
<ion-label> {{item.answer}} {{answer}}</ion-label>
<ion-radio slot="start" color="tertiary" value="{{item.id}}
(ionBlur)="saveAnswer(item.id)">
</ion-radio>
</ion-item>
</ion-radio-group>

As of Ionic 4+, the correct sintax is:
<ion-list>
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
Unit
</ion-list-header>
<ion-item>
<ion-label>Metric (kg)</ion-label>
<ion-radio value="1"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Imperial (lbs)</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

You have to update below code too in Ionic 5.
this.unit = 2;
to
this.unit = '2';
In a word, you can't use integer variable as ion-radio value.
If you are going to use integer type of unit, please reference follow code.
this.options = [
{
label: 'Metric (kg)',
value: 1
},
{
label: 'Imperial (lbs)',
value: 2
}
];
in .html code
<ion-radio-group [(ngModel)]="unit">
<ion-list-header>
<ion-label>
Unit
</ion-label>
</ion-list-header>
<ion-item *ngFor="let opt of options">
<ion-label>{{opt.label}}</ion-label>
<ion-radio [value]="opt.value" slot="start"></ion-radio>
</ion-item>
</ion-radio-group>

This is what works for ionic 5..tested and working fine
<ion-list>
<ion-radio-group >
<ion-list-header>
<ion-label>{{'Drivers' | translate}}</ion-label>
</ion-list-header>
<ion-item *ngFor="let item of drivers" lines="none" (ionChange)="checkValue(item)">
<ion-avatar slot="start">
<img [src]="item.coverImage" />
</ion-avatar>
<ion-label>{{item.fullname}} <br>
<p>{{'Distance' | translate}} : {{item.distance}}Km</p>
</ion-label>
<ion-radio [value]="item.id"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
Then in your controller u can pick it like this
checkValue(value){
console.log("returned", value);
}

This is working for me
postData={
"gender":''
}
<ion-list>
<ion-radio-group value="Male" >
<ion-list-header>
<ion-label style="font-size:10px;">Gender</ion-label>
</ion-list-header>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio slot="start" value="Male" (ionBlur)="postData.gender='Male'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Female</ion-label>
<ion-radio slot="start" value="Female" (ionBlur)="postData.gender='Female'"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

This worked for me on Ionic 5
<ion-radio-group name="iconSelect" ngDefaultControl [(ngModel)]="playerIcon" (ionChange)="setIcon()">
<ion-list-header>
</ion-list-header>
<ion-item>
<ion-label>
<ion-icon name="radio-button-off"></ion-icon>
Circle
</ion-label>
<ion-radio value="1" ></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="square-outline"></ion-icon>
Square
</ion-label>
<ion-radio value="2"></ion-radio>
</ion-item>
<ion-item>
<ion-label>
<ion-icon name="play"></ion-icon>
Triangle
</ion-label>
<ion-radio value="3" ></ion-radio>
</ion-item>
</ion-radio-group>

Related

Ionic 5 / Angular 8 toggle a div on clicking outside

I have a settings screen with 4 radio buttons. If I click on any of the radio button a success message should be displayed and if I click anywhere else the message should be hidden.
Here is the code:
settings.component.html:
<ion-content>
<div class="flex-container">
<ion-card>
<div class="message">
<div class="message-inner" *ngIf="isMessageDisplay">
<ion-icon name="checkmark"></ion-icon>
<p>Success message</p>
</div>
</div>
<div class="home-screen">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the home page to display</ion-card-title>
</ion-card-header>
<ion-card-content class="home-screen-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="homeButtons"
>
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>home 1</ion-label>
<ion-radio [value]="home.home1"
(ionSelect)="home1()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">home 2</ion-label>
<ion-radio [value]="home.home2"
(ionSelect)="home2()"
color="secondary"
></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
<div class="products">
<ion-card-header>
<ion-card-title class="ion-text-center">Select the product to display</ion-card-title>
</ion-card-header>
<ion-card-content class="products-buttons">
<ion-list class="radio-buttons">
<ion-radio-group name="productButtons">
<ion-row>
<ion-col size="6">
<ion-item lines="none">
<ion-label>Product 1</ion-label>
<ion-radio [value]="product.product1"
(ionSelect)="product1()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
<ion-col size="6">
<ion-item lines="none">
<ion-label color="lightgray">Product 2</ion-label>
<ion-radio [value]="product.product2"
(ionSelect)="product2()"
color="secondary"></ion-radio>
</ion-item>
</ion-col>
</ion-row>
</ion-radio-group>
</ion-list>
</ion-card-content>
</div>
</ion-card>
</div>
</ion-content>
settings.component.ts:
import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '#angular/core';
import { Store } from '#ngrx/store';
import { Subscription } from 'rxjs';
#Component({
selector: 'app-settings-menu',
templateUrl: './settings-menu.page.html',
styleUrls: ['./settings-menu.page.scss'],
})
export class SettingsMenuPage implements OnInit, OnDestroy {
isMessageDisplay: boolean = false;
subscriptions$: Subscription[] = [];
constructor(
private store: Store<any>,
private elemRef: ElementRef
) {
}
ngOnInit() {
}
#HostListener('document:click', ['$event.target'])
onClickOutside(targetElement) {
const target = this.elemRef.nativeElement.querySelector('ion-radio');
if (targetElement.tagName != target.tagName)
this.isMessageDisplay= false;
}
home1() {
// some other logic
this.isMessageDisplay= true;
}
home2() {
// some other logic
this.isMessageDisplay= true;
}
product1() {
// some other logic
this.isMessageDisplay= true;
}
product2() {
// some other logic
this.isMessageDisplay = true;
}
ngOnDestroy() {
this.subscriptions$.forEach(subscription => subscription.unsubscribe());
}
}
The above code does the task well during development when I run ionic serve command. But once I build the code for browser using ionic cordova build browser --prod --release and deploy it in some server then success message does not toggle right away, it takes much time when I click anywhere else in the screen.
Please help!
The porblem was in the HostListener. Instead of using #HostListener('document:click', ['$event.target']) I used #HostListener('click', ['$event.target']) and removed document. This solved the problem I had during the production. I don't know the exact reason why this happened.

How to submit a form in Angular and send data back?

I'm building a form component to get some data from user and send them back to another component, which has to be updated according to these values.
In my code I have two components:
1) Balance page
2) Balance-add component
I'd like Balance page to be updated every time the user fills the form in Balance-menu component, and I need to create a new card in the Balance page for each form submitted.
Balance.page.ts:
constructor(
private router: Router,
) { }
ngOnInit() {
}
addToList() {
this.router.navigateByUrl('balance-add')
}
balance.page.html:
<ion-content>
<ion-card>
<ion-card-header>
<ion-card-title>Balance:</ion-card-title>
</ion-card-header>
<ion-card-content>
<div>
{{this.balance}}
</div>
</ion-card-content>
</ion-card>
//Here <ion-card> for each form submitted
//<ion-card *ngFor="let form of list_of_forms"></ion-card>
</ion-content>
<ion-footer>
<div>
<ion-icon name="add-circle" (click)="addToList()"></ion-icon>
</div>
</ion-footer>
The second component is balance-add.component.ts
(I don't know how to implement sendData method)
constructor() { }
ngOnInit() {}
sendData() {
// ???
}
and here's the html:
<div>
<ion-item>
<ion-label>How much did you spend?</ion-label>
<ion-select [(ngModel)]="buy.cost" okText="Okay" cancelText="Dismiss">
<ion-select-option value="ten">10</ion-select-option>
<ion-select-option value="twelve">20</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>What is the item?</ion-label>
<ion-input [(ngModel)]="buy.item" placeholder="E.g. Eggs></ion-input>
</ion-item>
<ion-button (click)="sendData()"> ADD TO BALANCE </ion-button>
</div>
Thanks

IONIC - get multiple checkbox status as a function parameter

My checkbox code:
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="drinkSmall" color="blue" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="drinkRegular" color="blue" checked="true"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="drinkLarge" color="blue" checked="true"></ion-checkbox>
</ion-item>
My submit button:
<button ion-button color="primary" block (click)="addBeverage(
drinkName,
drinkmenuDesc,
drinkPrice,
drinkCategory,
drinkSmall,
drinkRegular,
drinkLarge
)" [disabled]="!menuName">
Add Beverage
</button>
Edited:
I want to pass all the checkbox status as a parameter of a function. The drinkSmall, drinkRegular, drinkLarge should be the status of checkbox.
You should create a object that holds the checkbox values. Then you can pass that object to your submit function. See below for a example using a model called "checkboxes"
TS:
// A achecboxes object in your controller:
checkboxes: any = {
drinkSmall: true,
drinkRegular: true,
drinkLarge: true
}
HTML:
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkSmall" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkRegular" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="checkboxes.drinkLarge" color="blue"></ion-checkbox>
</ion-item>
<button ion-button color="primary" block (click)="addBeverage(checkboxes)" [disabled]="!menuName">
Add Beverage
</button>
In .ts you need to create an object.
checkboxes: any = {
drinkSmall: true,
drinkRegular: true,
drinkLarge: true
};
data: any = {
checkboxes:this.checkboxes,
para1:'',
para2:'',
para3:''
};
In .html you need to change like
<ion-item>
<ion-label stacked>Beverage Size</ion-label>
</ion-item>
<ion-item>
<ion-label>Small</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkSmall" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Regular</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkRegular" color="blue"></ion-checkbox>
</ion-item>
<ion-item>
<ion-label>Large</ion-label>
<ion-checkbox [(ngModel)]="data.checkboxes.drinkLarge" color="blue"></ion-checkbox>
</ion-item>
<button ion-button color="primary" block (click)="addBeverage(data)" [disabled]="!menuName">
Add Beverage
</button>
Here one object data holds multiple checkbox as well as para1,para2,para3
Output of console.log

Calculate price from input text using ionic

I want to create a simple shopping list app with the price.
This is my shopping.html
<ion-header>
<ion-navbar color="secondary">
<ion-title align="center">
My Shopping Tracker
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="addItem()"><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.type}}</ion-item>
</ion-list>
</ion-content>
<ion-content>
<ion-list>
<ion-item-sliding *ngFor="let item of items">
<ion-item>
<h2>{{item.today}}</h2>
<p>{{item.type}}</p>
<p>{{item.total}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button (click)="delete(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
<button ion-button (click)="edit(item)">
<ion-icon name="redo"></ion-icon>Edit
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar >
<ion-title>{{total}}</ion-title>
</ion-toolbar>
</ion-footer>
This is the addshopping.html
<ion-header>
<ion-toolbar color="secondary">
<ion-title>
Add Shopping List
</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="close()"><ion-icon name="close"></ion-icon></button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Date:</ion-label>
<ion-datetime displayFormat="DD-MM-YYYY HH:mm" [(ngModel)]="today"></ion-datetime>
</ion-item>
<ion-item>
<ion-label floating>Type:</ion-label>
<ion-input type="text" [(ngModel)]="type"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Description:</ion-label>
<ion-input type="text" [(ngModel)]="description"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Total Amount:</ion-label>
<ion-input type="text" [(ngModel)]="total"></ion-input>
</ion-item>
</ion-list>
<button full ion-button color="secondary" (click)="saveItem()">Save</button>
</ion-content>
This is my addlist.ts
import { Component } from '#angular/core';
import { NavController, ViewController } from 'ionic-angular';
#Component({
selector: 'page-addlist',
templateUrl: 'addlist.html'
})
export class AddListPage {
type: string;
description: string;
today: Date;
total: price;
constructor(public navCtrl: NavController, public view: ViewController) {
}
saveItem(){
let newItem = {
type: this.type,
today: this.today,
description: this.description,
total: this.total,
};
this.view.dismiss(newItem);
}
close(){
this.view.dismiss();
}
}
How do I calculate the total price for each time I add up new item? and display it on the footer? I uploaded the image.
Do I need to change from string to number values? Or stay it as string?
You can use a function that returns the total price, like this
private getTotalPrice() {
let totalPrice = 0;
for (let item of itens) {
totalPrice += Number.parseFloat(item.total);
}
return totalPrice;
}
and then u can call it in the footer
[(ngModel)]="getTotalPrice()"

Ionic2-array not updating on html side

I am new in Ionic2 and Angular2 trying to update my array at front side but its not updating.Moreover its updating perfectly at backend (ts),checked using console. need your help
My Component:
import { Component } from '#angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
#Component({
selector: 'page-modal-filter',
templateUrl: 'modal-filter.html'
})
export class ModalFilterPage {
public fil=[];
public BRANDNAME: any;
public srts:any;
constructor(public nav: NavController, public viewCtrl: ViewController, public navParams: NavParams) {
this.fil = [];
this.srts="ABCD";
if (navParams.get('tabName') == 'filter') {
let data = navParams.get('data');
data.map(d => {
for (let op in d.OPTIONGROUP) {
for (let x in d.OPTIONGROUP[op]) {
if (x != "UPC") {
if (!this.fil[x]) {
this.fil[x] = [];
}
if (this.fil[x].indexOf(d.OPTIONGROUP[op][x]) == -1) {
this.fil[x].push(d.OPTIONGROUP[op][x]);
}
}
}
}
})
console.log(this.fil);
}
}
closeModal() {
// this.nav.pop();
this.viewCtrl.dismiss(true);
}
}
"fil" array not showing on frontside of html but console show its perfectly.
My html code:
fil array not showing
<ion-header>
<ion-navbar color="primary">
<ion-buttons start>
<button ion-button (click)="closeModal()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title>Search Result(105)</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="tab-filter">
<!--filter list-->
<pre>{{fil}}</pre>
<pre>{{srts}}</pre>
<ion-list class="list-no-border">
<ion-item>
<ion-label> PLACE</ion-label>
<ion-select>
<ion-option value="">All Regions</ion-option>
<ion-option value="vn">Vietnam</ion-option>
</ion-select>
</ion-item>
<ion-item class="price-ranger">
<ion-label>Price</ion-label>
<ion-input type="text" placeholder="Min"></ion-input>
-
<ion-input type="text" placeholder="Max"></ion-input>
</ion-item>
<ion-item>
<ion-label>Free shipping</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Once pice only</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Sale items</ion-label>
<ion-toggle checked="false"></ion-toggle>
</ion-item>
</ion-list>
</ion-content>
<!--Footer buttons-->
<ion-footer class="category">
<ion-toolbar position="bottom">
<ion-buttons end>
<button ion-button (click)="closeModal()">
CANCEL
</button>
<button ion-button (click)="closeModal()">
<span ion-text color="gray">APPLY</span>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
Your {{fil}} is an array yet you are declaring it on the view as a simple property. Angular does not automatically interpret an array with string interpolation.
For arrays you need to use *ngFor
So if you want like you have stated is being displayed in your console.log you could write something like
<div *ngFor="let item of fil">
<ion-item *ngFor="let color of item.COLOR">
{{color.propertyName}}
<ion-item>
<ion-item *ngFor="let size of item.SIZE">
{{color.propertyName}}
<ion-item>
</div>
I resolved my issue by using
this.fil = [];
to
this.fil={}

Categories

Resources