How to hide the zero in an input in Angular?-CodePudding

There are several answers on Google, but when I want to adapt with my code, it doesn't work.

When the user enters an account number, I don't want the input to show 0 in the cell, I want the cell to be blank.

Is it possible to do this?

<div >
   <div >
      <label for="account" >Account</label>
   </div>
   <div >
      <input id="account" name="account" type="number"  [(ngModel)]="search.account" maxlength="30" (change)="search.resetReference()">
   </div>
</div>

Class

export class SelectPortfolioModel {
    account: number;
    title: string;
    name: string;
    reference: string;

    constructor() {
        this.account = 0;
        this.title = '';
        this.name = '';
        this.reference = '';
    }

    resetReference(): void {
        this.reference = '';
    }

    resetNameAndTitle(): void {
        this.account = 0;
        this.name = '';
        this.title = '';
    }
}

CodePudding user response：

Yes, it is possible to make the input cell blank when the user enters an account number of 0. One way to do this is to add a condition in the resetReference() function that checks if the account property is equal to 0, and if so, sets it to null or an empty string.

Here's an example of how you could modify the resetReference() function:

resetReference(): void {
    if (this.account === 0) {
        this.account = null;
    }
    this.reference = '';
}