Angular2 ngModel doesn't clear when set to “”

Question

Example class for storing my data

export class Key {
    value: any = '';

    formatter() {
        let value = MyFunction(this.value);

            if(!value) {
                value = '';
            }

            this.value = value;
        }
    }
}

ngModel input field

<input type="text" [(ngModel)]="key.value" (ngModelChange)="key.formatter()">

MyFunction() - Should remove all non-numeric characters from the string and return JUST the numbers

function MyFunction(mystr) {
   mystr = mystr.replace(/\D/g,'');

   if(mystr.length === 0) {
        return "";
   }else {
        return mystr;
   }
}

When MyFunction() returns an empty string and tries to update key.value... Instead of clearing the input field it keeps appending the new letters.

Am I missing something?

Answer 1

In key.formatter() function replace if condition with

if(value === ""){ 
    ... 
}

Hope this helps!!!

Answer 2

代替（ngModelChange）尝试使用[value]="key.value | yourCustomPipe