Manipulating input text when ngModelChange fails

Ionic Framework ionic-v3
1

Hi everyone
Today I’m struggling with an input field I want to manipulate and somehow it only works once.

I created a simple example to demonstrate it: I want to check a text that has been entered in an ion-input field. I want to check if it fulfills some requirements and if not it should be cleared. Strange: It works once when entering the first wrong letter but after that I can simple enter whatever text I want. Even though ‘checkInput()’ is fired and ‘this.input_text = “”’ is executed after every keypress it won’t clear the displayed text in the input field.

Any idea how I can achieve what I need? I tried to use ‘(ionChange)’ instead but it still didn’t work. Thanks a lot!

<ion-input #input [(ngModel)]="input_text" (ngModelChange)='checkInput()'></ion-input>

  checkInput() {
    if (this.input_text != "a") {
      this.input_text = ""
    }
  }
2

if (this.input_text,instr(‘a’) < 0 ) this.input_text = “”

3

Thank you very much but unfortunately this doesn’t solve the problem. It’s not about the if-condition it’s about updating the input text.
Here’s an even simpler example that doesn’t work.

<ion-input #input [(ngModel)]="input_text" (ngModelChange)='checkInput()'></ion-input>

  checkInput() {
      this.input_text = ""
  }
4

You must take away the banana binding on ngModel: IOW, make it [ngModel] instead. Otherwise, Angular blows away whatever you are doing in ngModelChange. This is part of why I recommend never having overlapping responsibilities.

5

Thank you very much! I thought it has something to do with this. I now removed the brackets but I still have the same problem: It only works once.

<ion-input #input [ngModel]="input_text" (ngModelChange)='checkInput()'></ion-input>

  checkInput() {
      this.input_text = ""
  }
6

Hmm. This works for me (converts all alpha to uppercase); if you can replicate that, then maybe you can work backwards to what you really want:

<ion-input [ngModel]="fruit" (ngModelChange)="fruitChanged($event)"></ion-input>

fruitChanged(newf: string): void {
  this.fruit = newf.replace(/[a-z]/g, c => c.toUpperCase());
}
7

Thank you very much. Your code really works. But if I modify your method it stops working and I don’t understand why:

  fruitChanged(newf: string): void {
    this.fruit = "";
  }

I’d expect that it deletes the input field after each letter entered. But it only does it once.

8

That is rather odd, and while I’m not sure I can explain it, I think I do have an alternative that might work for you:

<ion-input [ngModel]="fruit" (ionChange)="fruitChanged($event)"></ion-input>

fruitChanged(newf: TextInput): void {
  newf.value = '';
}
9

Thanks a lot, this works. :+1: This way I don’t even need [ngModel]="fruit".

Anyway it would be interesting why I can’t use ngModel here. Someone has an idea?

10

Make sure you add BrowserModule in your app.module.ts

imports: [
    BrowserModule,

and as far as I know you should use [(ngModel)].
I often use JavaScript events in Angular and Ionic. You could use onchange="checkInput()"

11

Hi STRINIX
I already added BrowserModule befor but I’ll try onchange next time. Thanks for this.
I just thought it was better to use Angular if possible instead of plain JavaScript.

12

Not if you also have a separate change handler; that results in too many cooks in the kitchen.