Angular 2-值在输入文本框中未更新，但是如果在花括号内使用则更新

Question

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',
  template: `<input [(ngModel)]="name"  type="text" (input)="inputChange()">
<h3>{{name}}</h3> `
})
export class AppComponent  { 
  name = 'Apple'; 

   inputChange() {
     this.name="Zebra";

  }
}

here's my angular component. I have an input box and on every key input the function "inputChange()" is called which changes my name to "Zebra",

I have to validate the user input and return certain values for which I have to call the input event everytime they write something. I want the textbox value to be same as "Zebra" as my function changes the value no matter what the user types in the textbox. What am i doing wrong here?

Answer 1

You are calling inputChange() which changes the property name to "Zebra". You already implemented Two-Way binding. So it is not necessary to call an event function.

Change this:

<input [(ngModel)]="name"  type="text" (input)="inputChange()">

to

<input [(ngModel)]="name"  type="text">

To validate the value, you have multiple options to do so. 1 of them are getting the object reference of the HTML element.

This can be done by:

<input [(ngModel)]="name"  type="text" (input)="inputChange(myInput)" #myInput>

In component file:

inputChange(element: HTMLElement) {
     // Some sort of check
     name = element.value;
  }

And remove the two-way-binding of course [(ngModel)]="name"

Answer 2

将输入事件更改为键盘

<input [(ngModel)]="name"  type="text" (keyup)="inputChange()">

Answer 3

In this case, you have to remove [(ngModel)] binding and work directly with input element.

You need to inject Renderer2 into your component, then update view value with

this.renderer.setProperty(element, 'value', 'Zebra');

where element is ref to input element, for example by @ViewChild

Best practice for your task is to create custom component or directive, which implements ControlValueAccessor and uses Renderer2 inside.

https://almerosteyn.com/2016/04/linkup-custom-control-to-ngcontrol-ngmodel