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
– Mohd Tabish Baig, Commented Jul 31, 2018 at 7:23
@MohdTabishBaig I'm using change event and ill let you know if its worked or not — Liyakhat Ali Sheikh
– Liyakhat Ali Sheikh, Commented Jul 31, 2018 at 7:29
Maybe your answer is here? stackoverflow.com/questions/27916185/… — GonzaloPani
– GonzaloPani, Commented Jul 31, 2018 at 7:41

Liyakhat Ali Sheikh · Accepted Answer · 2018-08-03 13:38:34Z

2

<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

edited Aug 3, 2018 at 13:38

answered Jul 31, 2018 at 9:24

Liyakhat Ali Sheikh

1632 gold badges5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Black Mamba · Accepted Answer · 2018-07-31 07:56:33Z

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, 2018 at 7:56

Black Mamba

15.8k7 gold badges94 silver badges113 bronze badges

Comments

Suresh Kumar Ariya · Accepted Answer · 2018-07-31 09:01:38Z

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, 2018 at 9:01

answered Jul 31, 2018 at 7:32

Suresh Kumar Ariya

9,8041 gold badge22 silver badges28 bronze badges

Comments

Sarfaroj · Accepted Answer · 2020-07-14 10:59:56Z

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, 2020 at 10:59

answered Jul 14, 2020 at 10:50

Sarfaroj

911 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related