Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 230101

Issue with ion-select and ion-option

$
0
0

Hi, i am having trouble with ion-select and ion-option

Problem: the ion-select should only show the code when it is selected and not the entire name and code. I tried to use [Selected Text] for this as shown in the api - https://ionicframework.com/docs/api/components/select/Select/

but i get an error saying “Can’t bind to ‘selectedText’ since it isn’t a known property of ‘ion-option’.”

i don’t know if what ive done is best practise so if theres anything else i can improve let me know.

signup.ts

import {Component} from '@angular/core';
import {NavController, ToastController} from 'ionic-angular';

import {MainPage} from '../../pages/pages';
import {VerifyPage} from '../verify/verify';

import {User} from '../../providers/user';
import {UtilProvider} from '../../providers/util';

import {TranslateService} from '@ngx-translate/core';


@Component({
    selector: 'page-signup',
    templateUrl: 'signup.html'
})
export class SignupPage {

    account: { countryCode: string, number: string } = {
        countryCode: '+44',
        number: '123456789',
    };

    // Our translated text strings
    private signupErrorString: string;

    countries: any;

    constructor(public navCtrl: NavController,
                public user: User,
                public toastCtrl: ToastController,
                public translateService: TranslateService,
                public util: UtilProvider) {

        this.getCountries();
    }

    getCountries() {

        this.util.getCountries().subscribe((resp) => {

            this.countries = resp.json();

        }, (err) => {

            console.log(err);
        });

    }
}

signup.html

<ion-header>

	<ion-navbar>
		<ion-title text-center="">{{ 'SIGNUP_TITLE' | translate }}</ion-title>
	</ion-navbar>

</ion-header>


<ion-content padding>
	<form (submit)="doSignup()">

		<div padding-top></div>

		<p ion-text text-center>Register With Your Phone Number</p>
		<ion-item>
			<ion-icon item-start name="phone-portrait"></ion-icon>
			<ion-select item-left [(ngModel)]="account.code" name="countrycode">
				<ion-option *ngFor="let country of countries" [value]="country.code" [selectedText]="country.code">{{country.name}} {{country.code}}</ion-option>
			</ion-select>
			<ion-input item-end type="text" [(ngModel)]="account.number" name="number"></ion-input>
		</ion-item>

		<div padding>
			<button ion-button color="primary" block>Send Confirmation Code</button>
		</div>

		<p ion-text text-center color="dark">We will send a one time SMS message to verify your phone number.</p>

	</form>
</ion-content>



Viewing all articles
Browse latest Browse all 230101

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>