Input uppercase

Why this does not work?

            <div text-uppercase>
                <ion-input type="text" placeholder="----" [(ngModel)]='ccia'></ion-input>
            </div>

I see the text lowercase (if I enter it il l.c.) and also the variable contains a lower-case string.

1 Like

I find why: is an open issue ! :frowning:

Hi,
I am not too sure what you want to do. But if you want to convert lowercase to uppercase, use angular pipes. see below links.

http://www.concretepage.com/angular-2/angular-2-uppercase-pipe-and-lowercase-pipe-example

You can use it with input as follows:

<ion-input type="text" [ngModel]='text | uppercase'></ion-input>

Ashley

Thanks a lot, Ashley. It’s what I’m looking for. And I didn’t know pipe in binding.

But I got an error:

	Parser Error: Cannot have a pipe in an action expression at column 8 in [ccia | uppercase=$event] in ng:///AppModule/DatiRapportoPage.html@84:58 ("
            <ion-col col-2>
                <ion-input type="text" placeholder="----" [ERROR ->][(ngModel)]='ccia | uppercase'></ion-input>
            </ion-col>

It doesn’t work in ion-Input. Or the problem is in ng-model, because this one works:

<ion-label stacked>{{ whyData | uppercase }}</ion-label>

Pietro

is ccia defined as a variable in your .ts? please do so. otherwise try the following

<ion-input type="text" placeholder="----" [ngModel]='ccia | uppercase' (ngModelChange)="onChange($event.value)"></ion-input>

in your .ts, maybe something like that

onChange(value) {
 this.ccia = value;
}

Ashley

Yes, it is!.

Declaration:

    ccia: string = null;

I need it is null, indeed. But if this is the problem, I can modify my code.
But in my mind uppercase(null) == null has to be true :grin:

Pietro

<ion-input [ngModel]="ccia" (ngModelChange)="ccia = $event.toLocaleUpperCase()"></ion-input>
12 Likes

Thanks A LOT, rapropos

Just had the same issue a little ago. All hail rapropos!!

@rapropos friend I trying this it and work fine here but with [ngModel] in the case if I want to use this in a formControlName doesn’t work and now, can you help me?

1 Like

Why not with CSS? It should be as easy as adding a rule:

input#my-input {
    text-transform: uppercase;
}
3 Likes