@nstudio/nativescript-input-mask: Angular form properties don't work with InputMask

[FaizulhassanM]

I tried to show default value for the InputMask field, for which I had tried both [(ngModel)] and reactive forms both did not work.

Assigning ngModel variable a value did not show the default value in the screen

Reactive Form: I had defined formGroup and controller names

<InputMask #phoneNumber class="input" formControlName="phoneField"
    mask="([999]) [999]-[9999]" keyboardType="phone" (extractedValueChange)="onPhoneFieldChange($event)">
</InputMask>

TS File: In ts file I had defined the form group and form builder and have assigned initial value for the controller (phoneField). Tried patchValue as well. No luck!

this.formBuilder.group({
   phoneField: [95555, Validators.required]
});

The default value 95555 did not show up in the screen.

---

Template Driven Form: Have assigned ngModel a value and that did not show up on the screen.

<InputMask #phoneNumber class="input" [(ngModel)]="phoneField" mask="([999]) [999]-[9999]" keyboardType="phone"
      (extractedValueChange)="onPhoneFieldChange($event)">
</InputMask>

public phoneField: number = 955555;

---

Environment:

Nodejs 14 Nativescript 8 Angular 11 Nativescript Angular & ios 8

For now I will have to just make use of simple TextField since masking and other features did not work. There are no other Input Mask library available as well. The one that are available in nativescript market place are all outdated , as they only support on version 6 and below and not 7 and 8. I need this InputMask badly, please help us fix the issue, this plugin from NSTUDIO could really help us a lot.

Thanks in advance :)

[dfborba]

I can confirm this is not working. Also I was unable to make it work even with ngModel approach!

The error I got with ngModel is: No value accessor for form control with unspecified name attribute

[dfborba]

I manage to make it work by binding a variable to text attribute on InputMask. So basically my form group has the attribute with all validations and every time the value changes on view (using extractedValueChange) I set the new value to the form attribute, and every time I loaded it from service I set it back to the variable used on the text attribute.

View: <InputMask [text]="phoneText" mask="([00]) [00000]-[0000]" (extractedValueChange)="onExtractPhone($event)"></InputMask>

Typescript public onExtractPhone(args: any): void { this.editProfileForm.controls.phone.setValue(args.value); }

This is not the right approach, as the right one would be the value accessors being implemented, but will give us some time to create a PR or for the team to work on it.