CODEWITHSUNDEEP
angularcurrency-formatting
kinlhp
kinlhp

Reputation: 171

ng2-currency-mask <input readonly> property doesn't working

I have an input where the user is going to enter monetary values, so I'm using ng2-currency-mask to facilitate. However, I also need this input to be read only. Adding the readonly attribute did not solve my problem because, when you click the input and type, the value changes. Here is the code snippet:

<div class="ui-g-12 ui-md-6 ui-fluid">
    <label for="inputValor" id="labelValor">Valor unitário</label>
    <input id="inputValor" name="inputValor" type="text" currencyMask pInputText required ng-focus="false" [options]="{allowNegative: false, decimal: ',', prefix: 'R$ ', thousands: '.'}" [readonly]="true" [(ngModel)]="alteracoes.produto.valor">
</div>

Anyone with any ideas to solve this problem?

Upvotes: 1

Views: 1725

Answers (1)

Camilo Gutierrez
Camilo Gutierrez

Reputation: 41

If you can control the readonly value try something like this.

Your input tag

<input id="inputValor" name="inputValor" type="text" currencyMask pInputText required ng-focus="false" [options]="{allowNegative: false, decimal: ',', prefix: 'R$ ', thousands: '.'}" [readonly]="readOnly" (keydown)="onKeyDown($event)" [(ngModel)]="alteracoes.produto.valor">

And in your ts:

public readOnly: boolean; 

onKeyDown(event: any): void {
 if (this.readOnly) {
  event.preventDefault();
 }
}

Upvotes: 0

Related Questions