"checked" from "ion-radio" does not work

Asked

Viewed 1,376 times

1

<ion-list radio-group style="margin-bottom:10px;" [(ngModel)]="orcamento.tipo" name="tipo" #tipo="ngModel">

    <ion-item>
        <ion-label>Consumidor</ion-label>
        <ion-radio value="consumidor" checked="true"></ion-radio>

    </ion-item>

    <ion-item>
        <ion-label>Revenda</ion-label>
        <ion-radio value="revenda"></ion-radio>
    </ion-item>

</ion-list>

I wanted the first option of these radio inputs to be selected by default, but in the template it looks like this:

Imagem

Because the option is not coming selected?

  • http://jsfiddle.net/yk62zsxv/55/

  • Only taking advantage of its jsfiddle, when I installed Ionic, it did not come with that app.js file (which in all tutorials it is used), and in no file did the programming come in this "model": (angular.module('ionicApp', ['Ionic']).Controlle). It has to do with the Ionic version?

  • Yes. It is used to have access to the components in Ionic

2 answers

0

You don’t need this true, just pass the "checked"

<ion-radio value="consumidor" checked></ion-radio>

If not sure, try

<ion-radio value="orderBy1" [checked]="orderBy1">
  • Only with checked also was not :/ I also tried with [checked]="consumer" and nothing appeared...

0


Note that inside your ion-list has an ngModel which is where the value of the selected option will be stored, each ion-radio has a value, for you to initialize the Component with a selected one, just initialize the variable "budget.type" with the ion-radio value you want to get selected, example:

-- Your Component.ts --

orcamento.tipo = 'consumidor';

Adding this code in your constructor or in your onInit of the Component should already be selected, not needing to be checked in html, because it will be made to bind the ngModel value of the selected radio.

UPDATE

-- Your Component.ts --

orcamento = { tipo: 'consumidor', ... seus outros atributos de orcamento };

The error happened because your budget is an object, see where you initialize it and in the type field set with the desired ion-radio value.

In fact when you select an ion-radio it does it from behind, adds ion-radio value in ngModel, so if you initialize its value with a selected one, it will search within the ion-list which ion-radio has the value informed and will select it.

  • Error appeared: ERROR Error: Uncaught (in Promise): Typeerror: Cannot set Property 'type' of Undefined

  • I corrected the answer.

  • Now yes! Thank you very much!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.