CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
some weird rando
some weird rando

Reputation: 11

Angular2 Nativescript: auto-reformatting TextInput with ngModelChange - why does this not work?

I am trying to reformat user input into a text field as it is entered. For example, let's say I want to limit the input to digits, and implement a maxLength of 4 characters, and prepend it with a "+" sign for the display.

I'm doing a little more reformatting IRL but this should do for an example ...

export class MyComponent {
    private _myField: string;
    myFieldDisplay: string;

    onMyFieldDisplayChange(event) {
        // I can see the display field has the correct value here
        console.log(this.myFieldDisplay);

        this._myField = event.replace(/\D/g, '').substring(0, 4);
        this.myFieldDisplay = "+" + this._myField;

        // and I can see the display field has the correct value here
        console.log(this.myFieldDisplay);
    }
}

Here is my template code:

<TextField 
    [ngModel]="myFieldDisplay" 
    (ngModelChange)="onMyFieldDisplayChange($event)">
</TextField>

What I expect is that it will store the private variable _myField, reformat myFieldDisplay and always display the reformatted value of myFieldDisplay in the TextField.

What happens is - I can see that myFieldDisplay is always reformatted correctly in the console, but this is not always reflected in the TextField. The TextField always allows more than 4 characters, and it only seems to strip out non-numeric characters on the first change. I.e., it only works, and only sometimes, on the first keypress if the entered character is non-numeric. Also, the "+" sign remains visible.

It's boggling my mind to log myFieldDisplay to the console, see that it always has the correct value, but not see that reflected in the TextField.

I've tried using this NativeScript Masked Input plugin, but it doesn't quite fit my use case, I'd like stricter validation.

What gives? Is it possible to do what I'm trying to do? Is there a much much easier way to accomplish this that I'm not seeing?

For what it's worth, I'm pretty new to NativeScript, TypeScript, Angular2 and mobile app development so ... I won't be surprised if I'm missing something obvious. Thanks!

Upvotes: 1

Views: 649

Answers (2)

Dlucidone
Dlucidone

Reputation: 1101

You can get it working like this -

HTML

 <TextField id="checkingPhoneNumber" (ngModelChange)="PhoneNumberCheck($event)" hint="Phone Number" keyboardType="number" autocorrect="false" autocapitalizationType="none" returnKeyType="next" [(ngModel)]="phoneNumber"></TextField>

TS

 `import textFieldModule = require("ui/text-field");
 import observableModule = require("data/observable");

 PhoneNumberCheck(args){
 var TextInputView = this.page.getViewById<TextField>("checkingPhone");
 TextInputView.on(textFieldModule.TextField.propertyChangeEvent,function(eventData:observableModule.PropertyChangeData){
  if (eventData.propertyName == "text" && eventData.value.length > 10) {
   setTimeout(
     function() { 
      TextInputView.text = eventData.value.substr(0, 10);
    }, 0);
  }
  });
  }`

Here in this the text field input will get substring as soon as it reaches the text length of 10.

Upvotes: 1

Nick Iliev
Nick Iliev

Reputation: 9670

@Elleen Noonan to use two-way binding in Angular-2 you need to import the FormsModule and to be more specific in NativeScript you need to import the wrapper called NativeScriptFormsModule in the respective @NgModule

e.g. To use this two-way binding we needed to import the NativeScriptFormsModule here

More about two-way binding here

Upvotes: 0

Related Questions