Search code examples
angularformsnativescript

NativeScript 8 Angular 15 TextField Model Binding missing last char


I have created an NS Angular Hello World project by running ns create demo. I have just added this to the item-details html:

  <TextField [(ngModel)]="demo"></TextField>
  <Label [text]="demo"></Label>

and then created the demo property in the component.

Afterwards, I added the NativeScriptFormsModule into the imports of the app.module. So I can see the input and while typing the label is always one char behind, in other words, it's displaying a copy -1 of what it's displayed on the input.

I have the suspicion that for some reason the change is emitted twice. As I can see if I add:

 (textChange)="($event)"

it emits first an event with the up-to-date value, and just after, another one, that prevails, with the previous value (minus one).

I'm baffled how a simple out-of-the-box binding does not work as expected and as it was happening on my project with NS5 and Angular 5.

Anyway, any idea how to sort it out without resorting to hacks? Because, the hack I created just worked well on the iOS Simulator, but not on the real device. Cheers!


Solution

  • This issue only happens on x86 builds on the iOS simulator on iOS 16.4+ (Xcode 14.3+). It's not related to NativeScript itself (or angular).

    Unfortunately, this is something only Apple can properly fix: https://developer.apple.com/forums/thread/727715 NativeScript/NativeScript#10267 (comment)

    It won't happen on a real device or arm (M1) simulator builds.

    (as answered by edusperoni on https://github.com/NativeScript/angular/issues/119 )

    So basically if you face this error, when manual testing on the simulator, just type an extra char ...