How can I uncheck a radio button or reset a radio group in Ionic 4?
This is not working (which used to work until Ionic 2):
<form [formGroup]="myForm">
<ion-list formControlName="listOptions">
<ion-radio-group>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFirst}">
<ion-radio value="answer1" (ionSelect)="processSelectedAnswer(1)"></ion-radio>
<ion-label>{{answer1}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerSecond}">
<ion-radio value="answer2" (ionSelect)="processSelectedAnswer(2)"></ion-radio>
<ion-label>{{answer2}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerThird}">
<ion-radio value="answer3" (ionSelect)="processSelectedAnswer(3)"></ion-radio>
<ion-label>{{answer3}}</ion-label>
</ion-item>
<ion-item class="bgtransparent" [ngClass]="{'bgred': correctAnswerFourth}">
<ion-radio value="answer4" (ionSelect)="processSelectedAnswer(4)"></ion-radio>
<ion-label>{{answer4}}</ion-label>
</ion-item>
</ion-radio-group>
</ion-list>
</form>
.
this.myForm = formBuilder.group({
listOptions: ['']
});
So mainly this function does not work anymore:
this.myForm.controls.listOptions.reset();
Should your formControl be on the ion-radio-group?
<form [formGroup]="myForm">
<ion-list>
<ion-radio-group formControlName="listOptions">
Related
When I portrait mode *ngIf it hides values what I want but when I make the device landscape it's showing empty cards between true values.
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngFor="let order of orders">
<ion-card *ngIf="order.status =='CL'">
<ion-card-title>
<h4>{{order.title}}</h4>
</ion-card-title>
<ion-card-content>
<ion-item>
<h4>{{order.description | filter:[200, '...']}}</h4>
</ion-item>
</ion-card-content>
<ion-button type="button" color="danger">Canceled</ion-button>
<ion-button type="button" color="primary">Delivered</ion-button>
</ion-card>
</ion-col>
The problem is that you're hiding the card but you're still leaving an empty column. Please try by hiding both the card and the column instead:
<ng-container *ngFor="let order of orders">
<ion-col sizeLg="4" sizeMd="4" sizeXs="12" *ngIf="order.status =='CL'">
<ion-card >
...
</ion-card>
</ion-col>
</ng-container>
i'm getting the following error:
core.js:7812 Can't bind to 'checked' since it isn't a known property of 'ion-radio'.
And my code on HTML is:
<ion-list>
<ion-radio-group value="default" (ionChange)="radioGroupChange($event)">
<ion-list-header>
<ion-label>Image language</ion-label>
</ion-list-header>
<ion-item>
<ion-label>SPA</ion-label>
<ion-radio [checked]="true" slot="start" value="spa"></ion-radio>
</ion-item>
<ion-item>
<ion-label>RU</ion-label>
<ion-radio slot="start" value="ru"></ion-radio>
</ion-item>
<ion-item>
<ion-label>ENG</ion-label>
<ion-radio slot="start" value="eng"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
How to set by default a radio button checked?
Well according to the Ionic5 docs (https://ionicframework.com/docs/api/radio), you have to set the value of the <ion-radio-group> to the value of the <ion-radio> that you want checked by default.
So get rid of your [checked]="true"
Change
<ion-radio-group value="default" (ionChange)="radioGroupChange($event)">
to
<ion-radio-group value="spa" (ionChange)="radioGroupChange($event)">
to achieve your desired outcome.
I have a simple button in ionic 4, i wan to run a function on clicking this button. but it seems like click event is not triggering.
here is html
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
ts:
export class HomePage {
text = "Lakhan"
changeText(){
this.text="Ram";
}
}
Try this:
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Instead of using onclick you need to use click so
<ion-content >
<ion-button (onclick)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
you need to change to
<ion-content >
<ion-button (click)="changeText()" expand="block" color="light">
Click me
<ion-icon name="arrow-forward"></ion-icon>
</ion-button
<p>My Name is {{text}}</p>
</ion-content>
Currently I am working on PWA project. In that I am using ionic-vue package. I am using ion-input for taking user input in form but required and size properties not working.
Code for vue component:
<template>
<div>
<ion-header>
<ion-toolbar>
<ion-icon name="close" class="close-icon" #click.prevent="redirectTo(close)"></ion-icon>
<ion-title>{{ title }}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="occupie-field" padding>
{{ content }}
<div>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('number-of-person')"
type="number" mode="ios" inputmode="decimal"
:value="total_person"
#input="total_person = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('name')"
:value="booking_name"
#input="booking_name = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('mobile-no')"
type="tel" inputmode="tel"
:value="contact_number"
#input="contact_number = $event.target.value"
></ion-input>
<ion-input class="modal-ion-input"
:placeholder="rootElement.$t('gstin-no')"
:value="gst_no" size="15" type="text"
#input="gst_no = $event.target.value"
></ion-input>
<!-- <tags-input
element-id="tags"
:existing-tags="available_table_list"
:typeahead="true"
:showAddedTags="true"
typeahead-style="dropdown"
:delete-on-backspace="false"
:only-existing-tags="true"
placeholder="Merge Table"
#tag-added="onTagAdded"
#tag-removed="onTagRemoved"
v-model="selectedTags"
></tags-input> -->
<!-- <ion-list> -->
<ion-item class="select-tablee">
<ion-label hidden>{{rootElement.$t('select-tables')}}</ion-label>
<ion-select :placeholder="rootElement.$t('merge-table')" multiple="true" value="merge_tables" #ionChange="selectChange($event)" :disabled="Object.keys(available_table_list).length === 0">
<ion-select-option v-for="(table, index) in available_table_list" :key="index" :value="index">{{ table }}</ion-select-option>
</ion-select>
</ion-item>
<!-- </ion-list> -->
</div>
<ion-button class="occupie-table-button" #click.prevent="submit" :disabled="disableBtn">{{rootElement.$t('occupie-table')}}</ion-button>
</ion-content>
When I add required property in ion-input then required property not working and form submitted without checking.
see this - https://gist.github.com/mlynch/2ff3692341276ba959fea96a620097f9
try
<IonInputVue v-model="contact_number" size="10"/>
I'm trying to display the radio button data based on user select but it doesn't display anything. Here is my code :
<div ng-app="" ng-init="categoryID">
<ion-list radio-group>
<ion-item>
<ion-label>Category 1</ion-label>
<ion-radio value="category1" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 2</ion-label>
<ion-radio value="category2" ng-model="categoryID"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Category 3</ion-label>
<ion-radio value="category3" ng-model="categoryID"></ion-radio>
</ion-item>
</ion-list>
<p>Category : {{ categoryID }}</p>
</div>
Trying to display like how it display at this url https://codepen.io/terrer-sandman/pen/erMzzQ