Hide 'Zero' value in input using typescript and Angular 2

Question

<input type="text" class="form-control"
                   id="transactionAmount"
                   maxlength="10"
                   OnlyNumber="true" 
                   [(ngModel)]="userBalance.transactionAmount" 
                   name="transactionAmount"
                   placeholder="Amount"
                   required
                   #transactionAmount="ngModel">

Here I have to hide zero amount while user entering the values.
If he enters all zero's then only we have to hide not in cases like 20,30,100 etc...
I'm using Angular 2.

call a function on `change` event, where you patch null to that input if the value entered is all 0s — Mohd Tabish Baig, Jul 31 '18 at 07:23
@MohdTabishBaig I'm using change event and ill let you know if its worked or not — Liyakhat Ali Sheikh, Jul 31 '18 at 07:29
Maybe your answer is here? https://stackoverflow.com/questions/27916185/angularjs-trims-leading-zeros-in-model-while-view-input-value-still-remains-unc — GonzaloPani, Jul 31 '18 at 07:41

Liyakhat Ali Sheikh · Answer 1 · 2018-08-03T13:38:34.437

<input type="text" class="form-control"
               id="transactionAmount"
               maxlength="10"
               OnlyNumber="true" 
               [(ngModel)]="userBalance.transactionAmount" 
               name="transactionAmount"
               placeholder="Amount"
               required
               #transactionAmount="ngModel"
               (keyup)="hideZero()>

Added This keyUp event in Html and in .ts added below code

hideZero(){
if(this.userBalance.transactionAmount === '0' ){
    this.userBalance.transactionAmount = '';
}

}

Working Absolutely fine

Suresh Kumar Ariya · Answer 2 · 2018-07-31T09:01:38.173

0

Try using (ngModelChange) event which will trigger when user types values. By using regex, you can remove the last zero value and update the DOM. Hope this helps.

edited Jul 31 '18 at 09:01

answered Jul 31 '18 at 07:32

Suresh Kumar Ariya

9,516
1
18
27

score 0 · Answer 3 · answered Jul 31 '18 at 07:56

0

/* In your ts */
validateNumber(value: String) {
 userBalance.transactionAmount = value && value.replace(/(?:0*)(\d*)/g, (_,value1) => {
 return value1;
})
}

<input (input)="validateNumber($event)">

answered Jul 31 '18 at 07:56

Black Mamba

13,632
6
82
105

Sarfaroj · Answer 4 · 2020-07-14T10:59:56.547

0

Angular 0 value don't display

<span *ngIf="!pro.model === '0'">{{ pro.model }}</span>

Like this, When model value is zero that time don't display model value. If model value is not zero that time show model value in your html pages.

edited Jul 14 '20 at 10:59

answered Jul 14 '20 at 10:50

Sarfaroj

61
1
4

Hide 'Zero' value in input using typescript and Angular 2

4 Answers4