I'm getting a strange error when trying to change the radio button value and posting it in my soap writeData. For example I'm trying to change the gender from M to F, I console.log it and the value in result of the change is like this: rb-1-0
This is my code:
<div radio-group formControlName="gender" style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" [value]="F" [checked]="customer.SESSO == 'f'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO"
class="radio-privacy in-middle">
<ion-radio color="dark" [value]="M" [checked]="customer.SESSO == 'm'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
This code should work fine for a normal radio button group, please customize the CSS as required.
<ion-list radio-group style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-item>
<ion-label>Female</ion-label>
<ion-radio color="dark" value="F" [checked]="customer.SESSO == 'F'"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Male</ion-label>
<ion-radio color="dark" value="M" [checked]="customer.SESSO == 'M'"></ion-radio>
</ion-item>
</ion-list>
Related
need some help with IONIC 5..i want to add on click function to each of the ion item...i want a form to appear below when any of the raio item is clicked
I have tried to use (ng-click)="selection(item.id)"
and also tried
none seem to work as expected.
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
Use (click)="method you want"
And in ionic 5, using text-center is deprecated,i think you can use class="ion-text-center" instead
In yours ts file:
export yourclass{
selectedValue:any;
}
In you html file:
<div class="cat-holder">
<ion-radio-group>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio [(ngModel)]="selectedValue" value="transport"></ion-radio>
</ion-item>
<ion-label>Item1</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center >
<img src="assets/imgs/bill1.svg" alt="">
<ion-radio [(ngModel)]="selectedValue" value="bill"></ion-radio>
</ion-item>
<ion-label>Item2</ion-label>
</div>
</ion-radio-group>
</div>
<div *ngIf="selectedValue=='value u want from radio"></div>
I was finaly able to get it done for IONIC 5 using the method below
ON .ts file i did it like this, using (ionChange)="segmentChanged($event)" on the ion-radio-group
category:any = "day";
then on HTML..hope it helps someone
<ion-label>Select Biller</ion-label>
<div class="cat-holder">
<ion-radio-group (ionChange)="segmentChanged($event)"
[value]="category">
<div class="rad-item" text-center >
<ion-item text-center>
<img src="assets/imgs/dstv.png" alt="">
<ion-radio value="transport" name="transport" ></ion-radio>
</ion-item>
<ion-label>Dstv</ion-label>
</div>
<div class="rad-item" text-center>
<ion-item text-center>
<img src="assets/imgs/gotv.png" alt="">
<ion-radio value="Gotv" name="gotv" ></ion-radio>
</ion-item>
<ion-label>Gotv</ion-label>
</div>
</ion-radio-group>
</div>
Having problems trying to nest lists, I expected them to be inset the further down they go, but instead I've got a complete mess as you can see in the screenshot below.
Here's the code:
<ion-content padding>
<div *ngIf="categories && categories.length > 0; then validContent else noContent"></div>
<ng-template #validContent>
<p>Please select the categories you wish to receive content for.</p>
<form (ngSubmit)="processForm($event)" id="userForm" class="ssp__form">
<ion-list lines="none" no-padding>
<ion-item lines="none" *ngFor="let category of categories">
<ion-label>{{ category.name }}</ion-label>
<ion-checkbox [name]="category.slug" [(ngModel)]="submissionData[category.term_id]"></ion-checkbox>
<ion-list inset="true" style="width:100%;" lines="none" no-padding *ngIf="category.children.length > 0">
<ion-item *ngFor="let subCategory of category.children">
<ion-label>{{ subCategory.name }}</ion-label>
<ion-checkbox [name]="subCategory.slug" [(ngModel)]="submissionData[subCategory.term_id]"></ion-checkbox>
</ion-item>
</ion-list>
</ion-item>
</ion-list>
<ion-button type="submit" style="width:100%;" color="primary" expand="block">Save Categories</ion-button>
</form>
</ng-template>
<ng-template #noContent>
<ion-card>
<ion-card-header>
<ion-card-title style="text-align: center; font-size: 14px;">No Categories Found.</ion-card-title>
</ion-card-header>
<ion-card-content>
<p style="text-align: center">There are no categories for you to read at this time.</p>
</ion-card-content>
</ion-card>
</ng-template>
</ion-content>
I'm currently working on a client page that reads from a SOAP some values and I'm trying to check a ion-radio if the value read from the call is equal to m or f. This is my code:
<ion-col col-2 style="margin-top:1%">
<ion-label>
<strong class="sexClass">{{'longRegister.sex' | translate }}</strong>
</ion-label>
<div radio-group formControlName="gender" style="margin-top:-10%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" value="F" checked="customer.SESSO == 'f'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" value="M" checked="customer.SESSO == 'm'"></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
</ion-col>
My DB table that I read is like this: [SESSO] char NULL,
Thanks in advance.
Traian
Fixed using [value] and [checked], now my code looks like this:
<div radio-group formControlName="gender" style="margin-top:-3%;margin-left:23%" [(ngModel)]="customer.SESSO">
<ion-radio color="dark" [value]="F" [checked]="customer.SESSO == 'f' "></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%; margin-left: 2%;font-size:16px">F</strong>
</span>
</div>
<div radio-group formControlName="gender" style="margin-left: 47%;margin-top: -10%" [(ngModel)]="customer.SESSO"
class="radio-privacy in-middle">
<ion-radio color="dark" [value]="M" [checked]="customer.SESSO == 'm' "></ion-radio>
<span>
<strong style="position: absolute;margin-top: -1%;margin-left: 4%;font-size:16px">M</strong>
</span>
</div>
Hello I just did a fresh install of ionic, actually just learning it however when I loaded it my browser I saw something I didn't like.
There appears to be a right margin I cannot get rid of, I have tried and tried but nothing seems to work. How do I remove it?
This is my html:
<ion-header> <ion-navbar primary>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Welcome, Person</ion-title> </ion-navbar> </ion-header>
<ion-content class="no-padding no-margin">
<ion-grid class="data-table no-padding no-margin">
<ion-row class="header no-padding no-margin">
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Customer</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Invoice #</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Type</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Amount</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Method</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">No. of Tickets</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
<ion-col justify-content-center padding>
<span class="label">
<span class="text col">Date & Time</span>
<span class="col">
<img src="assets/imgs/up-down-arrows.png" class="icon" />
</span>
</span>
</ion-col>
</ion-row>
</ion-grid>
<h3>Ionic Menu Starter</h3>
<p>
If you get lost, the docs will show you the way. </p>
<button ion-button secondary menuToggle>Toggle Menu</button> </ion-content>
This was a fresh ionic installation so it was like that before I even added my custom css.
I have a similar issue which <ion-card></ion-card> has left and right margins, it didn't help when I set no-margin, then I checked Overriding Ionic Varialbles and now the issue solved, you can check the site yourself and do your modification.
// App iOS Variables
// --------------------------------------------------
// iOS only Sass variables can go here
$card-ios-margin-left: 0;
$card-ios-margin-right: 0;
// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here
$card-md-margin-left: 0;
$card-md-margin-right: 0;
// App Windows Variables
// --------------------------------------------------
// Windows only Sass variables can go here
$card-wp-margin-left: 0;
$card-wp-margin-right: 0;
See attachedf image, left side is the original ion-card and right side is the one with settings(black part are the phone frame).
You could not implement custom padding if you want to inherit it from parent so:
<ion-content no-padding>
If you have to do with ion-card try this css:
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
Can anybody please verify this code in pure ionic-2 format.
Since I am bit confuse to check properly.
If This is not good format then What it could be?
`<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br/>accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login" >
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text"
[(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password"
[(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
if you using visual studio than use command Alt + shift + f to format the html code
<ion-content padding>
<div class="main-contain" col-12 col-sm-12 col-md-6 col-lg-4 col-xl-3>
<div class="header">
<h2 text-center class="vision">Vision Logistica</h2>
<hr col-6 class="hrow">
<h3 text-center class="vision">Ciao, inserisci i tuoi dati
per<br />accedere
</h3>
<hr col-6 class="hrow">
</div>
<h5 text-center>oppure</h5>
<div class="form" col-11>
<form [formGroup]="login">
<div class="username">
<ion-item>
<ion-label stacked class="labels">Username</ion-label>
<ion-input class="inputs" type="text" [(ngModel)]="username" formControlName="username"></ion-input>
</ion-item>
</div>
<div class="password">
<ion-item>
<ion-label stacked class="labels">Password</ion-label>
<ion-input class="inputs" type="password" [(ngModel)]="password" formControlName="password"></ion-input>
</ion-item>
</div>
</form>
</div>
</div>
</ion-content>`
Perfect right dear.
Alt + shift + f in visual studio code
and if you don't use visual studio code
you can format online if your code doesn't leak information in third party page