nstudio / nstudio/nativescript-plugins

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

Open
#59 2 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
55
Forks
42
Avg merge
49m
Merged PRs (30d)
1

Description

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 :)

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue provides Angular template and TypeScript form snippets but names no repository files or tests. Reproduce both [(ngModel)] and reactive-form cases with the stated NativeScript and Angular environment; done when initial values such as 95555 render in InputMask for both paths.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.