Nativescript: Label or Button [text] removing leading Zero from string with digits

[NickIliev]

_From @leocaseiro on July 14, 2016 2:57_

It seems that strings started with 0 are being treated as numbers.

I need to show some phone numbers that start with 0, but the app is removing the 0.

Code:

<Label text="{{'01234'}}"></Label>

It results on 1234 only;

I've tried convert to string, concatenate empty string os spaces, and none of these solutions work.

Anybody with same issue?

_Copied from original issue: NativeScript/nativescript-angular#344_

[NickIliev]

I have tested this issue and it seems that this issue is reproducible with NativeScript core modules.

Issue: When label or button text value is set via the XML and the input is containing only digits with a leading zero the leading zero is dismissed.
Code to reproduce:
https://github.com/NickIliev/NativeScript-issues/tree/master/NativeScript/issue_2455/app

@leocaseiro
As a workaround you can set your text in your code behind:
For example (NativeScript Core)

    var btn = page.getViewById("btn");
    btn.text = "0000123456"; // this works

In NativeScript + Angular-2 you can use ViewChild to set it accordingly

import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
import {Button} from "ui/button";
import {Label} from "ui/label";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent implements OnInit {

    @ViewChild("btn") button: ElementRef;
    @ViewChild("lbl") label: ElementRef;

    ngOnInit() {
        let viewButton: Button = this.button.nativeElement;
        let viewBLabel: Label = this.label.nativeElement;

        viewButton.text= "012345";
        viewBLabel.text= "012345";
    }
}

<StackLayout>
    <Label text="" #lbl class="title"></Label>  
    <Button text="" #btn (tap)="onTap()"></Button>
</StackLayout>

Or you can use this plugin https://www.npmjs.com/package/nativescript-maskedinput

[leocaseiro]

The @ViewChild worked. Thanks for that...

[nsndeck]

Fixed with commit #2474

[EddyVerbruggen]

Unfortunately this problem is back. Tested with Angular and Vue. Just drop this into an Angular view and the 0's will disappear (it's still working fine with regular XML views):

        <Label text="9.00"></Label>
        <Label text="001"></Label>

Temporary workaround: prefix with an invisible space (Angular example):

        <Label [text]="'\u200b9.00'"></Label>

If this needs to be a new issue instead of reopening this one please let me know, I simply thought the context would be nice to have.

[simonettoa]

this is a problem especially in my case where I use a listView so I have something like

<Label col="1" row="0" [text]="item.Plate" class="text-bold m-cell "></Label>

and testing with values with 0 has start are not visualised.
I modified has @EddyVerbruggen suggested and now it works, in this way

<Label col="1" row="0" text="{{ '\u200b' + item.Plate}}" class="text-bold m-cell "></Label>

It's still a workaround

[ironsmile]

The proposed workaround may work with a single or a few items but what do you do when you use a ListView?

        <ListView>
            <ng-template let-item="item">
                    <Label [text]="item.numberWithLeadingZeros()"></Label>
            </ng-template let-item>
        </ListView>

I am at a loss!

[NickIliev]

@EddyVerbruggen , @ironsmile , @simonettoa are you guys still reproducing this issue!?
I have created this demo Angular app and everything seems to work just as expected when we are passing leading or preceding zeroes as a string. Tested with official version of tns-core-modules (3.1.0)

[ironsmile]

Sorry, I am not working on any NativeScript projects anymore. But might give it a try, though.

[simonettoa]

@NickIliev I was still using the workaround above in my post; I just tried without and it's working as aspected. Good!

[SvetoslavTsenov]

I tested it with next version of tns-core-modules and it seems to be working on my side too, so I am closing the issue. Please get back to us if are you still reproducing it.

[EddyVerbruggen]

Looks good to me as well now! 🥇

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.