Hi there,
I’m trying to have two separated radio groups in the same view without using ion-list element. So user will be able to chose 2 options (1 for each group). I would like my group to be vertical like this:
I’m using the following ionic & Angular version:
package.json
{
"name": "edl",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/compiler-cli": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@ionic-native/core": "3.10.2",
"@ionic-native/splash-screen": "3.10.2",
"@ionic-native/status-bar": "3.10.2",
"@ionic/storage": "2.0.1",
"angular-wsse": "0.0.2",
"angular2-uuid": "^1.1.1",
"crypto-js": "^3.1.9-1",
"ionic-angular": "3.3.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"secure-random": "^1.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
"devDependencies": {
"@ionic/app-scripts": "1.3.7",
"@ionic/cli-plugin-ionic-angular": "1.3.1",
"typescript": "2.3.3"
},
"description": "An Ionic project"
}
MyHTML template:
<ion-header>
<ion-navbar>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Choix locataires entrants et sortants
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col col-8>Le contenu</ion-col>
<ion-col col-2>Entrant</ion-col>
<ion-col col-2>Sortant</ion-col>
</ion-row>
<ion-row *ngFor="let contrat of contrats; let i=index" class="borderDown" align-items-center>
<ion-col col-8>
<span *ngFor="let tenant of contrat.tenants; let j=index"><h3 ion-text color="primary" *ngIf="contrat.tenants.length <= 1">{{tenant.name}}</h3><h3 *ngIf="contrat.tenants.length >= 2">{{tenant.name}}, </h3></span>
<div item-content class="hTitle">
<h6>N°Contrat:</h6> <span>{{contrat.identifier}}</span> <h6>Date début: </h6> <span>{{contrat['start-date']}}</span>
</div>
</ion-col>
<ion-col col-2><input type="radio" [(ngModel)]="entrant" name="entrant" (ionChange)="getVal()" /></ion-col>
<ion-col col-2><input type="radio" [(ngModel)]="sortant" name="sortant" (ionChange)="getVal()" /></ion-col>
</ion-row>
</ion-grid>
<h1>Objets</h1>
<button [navPush]="pushPage" ion-button icon-right>Suivant <ion-icon name="arrow-forward"></ion-icon></button>
</ion-content>
My component:
import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
import { ApiGetService } from '../apiGet.service';
import { CurrentEdlService } from '../currentEdl.service';
@Component({
selector: 'choixLocataires-component',
templateUrl: '../../../pages/edl/pre/choixLocataires.html',
providers: [ApiGetService]
})
export class ChoixLocatairesComponent {
errorMessage: any;
contrats: any;
entrant: any;
sortant: any;
constructor(
public navCtrl: NavController,
private apiGetService: ApiGetService,
private currentEdlService: CurrentEdlService
) { }
ionViewCanEnter(): Promise<boolean> | boolean {
if (this.contrats == undefined) {
return this.apiGetService.getLease(this.currentEdlService.getObjet()).then(
contrats => this.contrats = contrats,
error => this.errorMessage = <any>error);
}
else {
return true;
}
}
ionViewDidEnter() {
}
getVal() {
console.log('Entrant: ' + this.entrant + ' Sortant: ' + this.sortant);
}
}
But currently only the last radio button of the list is selected and click on another radio button has no effect. The last one is still selected.
Hope someone can help me to sort this out. Thanks for your help and time 