How to get the formControl value with mask applied?

[andrebrz]

The mask is working fine to me, the problem is when I'm gonna get a formControl that has it's value masked from component the value doesn't came with mask... How to solve this?

tnx

<input type="text" class="form-control" id="Identificacion" formControlName="Identificacion" mask="0000-0000-00000">

[leandroneves-net]

I have the same problem.

When I use FormBuilder (1) or patchValue (2), the values are not masked.

(1)
this.f = this.formBuilder.group({
  'numero':                     [ 12.34 ]
});  }

(2) 
this.f.patchValue({'numero': 12.34})

Html Template

<form [formGroup]="f">
    <input type="text" formControlName="numero"  mask="separator.2" thousandSeparator="." nbInput status="primary">
</form>

[leandroneves-net]

I solve my problem.

First, Its needed to declare decimalMarker.

<form [formGroup]="f">
    <input type="text" formControlName="numero"  mask="separator.2" thousandSeparator="." decimalMarker="," nbInput status="primary">
</form>

Second, my server application send some numbers as strings. So I rewrote "mask.directive.ts" file and changed the line number 449 from if (typeof inputValue === 'number') { to if (typeof inputValue === 'number' || this._maskValue.startsWith('separator')) {

This changes solved the problem for me.

Hope this helps.

[rodineicirineu]

I solve my problem.

First, Its needed to declare decimalMarker.

<form [formGroup]="f">
    <input type="text" formControlName="numero"  mask="separator.2" thousandSeparator="." decimalMarker="," nbInput status="primary">
</form>

Second, my server application send some numbers as strings. So I rewrote "mask.directive.ts" file and changed the line number 449 from if (typeof inputValue === 'number') { to if (typeof inputValue === 'number' || this._maskValue.startsWith('separator')) {

This changes solved the problem for me.

Hope this helps.

@leandroneves-net How did you get decimalMarker to work? I've tried it in several ways and it just doesn't work, what version of ngx-mask are you using??

[leandroneves-net]

I tried with the version 12.0.0. I did not try with 13.0.0 yet.

For test propouses only, you can try https://github.com/JsDaddy/ngx-mask/pull/957 (applied on lnx-mask-test2 package for angular12.0.0). This is a test package and I will delete this soon.

Best regards,

Leandro

[rodineicirineu]

@leandroneves-net How strange, I use version 12.0.0 and for me the decimal doesn't work at all. I'll check this pr. Example: "<input required prefix="R$" mask="separator.2" thousandSeparator="." decimalMarker="," [dropSpecialCharacters]="false" type="string" formControlName="totalValue" class="form-control" placeholder="Digite o valor total">"

[andrebrz]

Hey guys, fortunately I solved this problem, maybe not with an elegant way but it's working pretty good in my project, take a look:

In HTML I added a variable to the input file, just like this:

<input #varIdentificacao type="text" class="form-control"  formControlName="identificacao" mask="{{tituloRepresentacao?.mask}}">

In the component I declared a global variable to access the input variable, like this:

//Global Variable
@ViewChild('varIdentificacao', { static: false }) varIdentificacao: ElementRef;

//Inside the form submit method
let identificacao = this.varIdentificacao.nativeElement.value;

Hope it helps!

[NepipenkoIgor]

Hi @andrebrz @leandroneves-net Thank you that using ngx-mask. Please try version >=13.1.10

[foerstj-dv]

This causes follow-up issue https://github.com/JsDaddy/ngx-mask/issues/1042

Could this maybe be reverted, and people be expected to parse their numbers themselves? Or fix their backends so it doesn't send numbers as strings? ;)