How to format phone number using nativescript


#1

Is there a way where a textfield can be broken as (__)- to store phone number

Please suggest


#2

#3

thanks it worked… :slight_smile:


#4

unable to show hint text using maskedTextField…Please suggest

  <StackLayout row="1" col="1" class="textboxright">
                <MaskedTextField formControlName="phone" (textChange)="textChangeM($event)" autocorrect="false" mask="(999) 999-9999" width="99%"
                    height="85%" class="input" backgroundcolor="#ffffff"></MaskedTextField>
            </StackLayout>

#5

I don’t see you have defined hint in your code above. It should be just like usual textfield.


#6
    <StackLayout row="1" col="1" class="textboxright">
                <MaskedTextField formControlName="phone" keyboardType="phone" (textChange)="textChangeM($event)" autocorrect="false" mask="(999) 999-9999" hint="Phone"
                    width="99%" height="85%" class="input" backgroundcolor="#ffffff"></MaskedTextField>
            </StackLayout>

no change in output…actually i tried by changing the keyboardtype as well but still no output


#7

It works on my end, if you could reproduce the issue on Playground let me know.


#8

#9

Your playground is not running, can you build a simple example with just mask textfield.


#10

#11

I understand that as soon i put “formcontrolname” in maskedtextfield…the hint does not work…otherwise it works fine.

What can be the reason …pls suggest

Code:

 <StackLayout row="1" col="1" class="textboxright"  >
                        <MaskedTextField class="input"   keyboardType="phone"  autocorrect="false" mask="(999) 999-9999"
                        hint="Phone" width="99%" height="85%" backgroundcolor="#ffffff" formControlName="phone" (textChange)="textChangeM($event)" ></MaskedTextField>
</StackLayout>

#12

By setting form control, you are setting the initial value to empty string which will prevent hint. Try setting it to null.


#13

thanks it worked… :slight_smile: