Угловое значение 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";

  }
}

вот мой угловой компонент.У меня есть поле ввода, и при каждом вводе ключа вызывается функция «inputChange ()», которая меняет мое имя на «Зебра»,

IЯ должен проверить ввод пользователя и вернуть определенные значения, для которых я должен вызывать событие ввода каждый раз, когда они что-то пишут.Я хочу, чтобы значение текстового поля было таким же, как у «Зебры», поскольку моя функция изменяет значение независимо от того, что пользователь вводит в текстовое поле.Что я здесь не так делаю?

Answer 1

Измените ваше входное событие на keyup

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

Answer 2

В этом случае вы должны удалить привязку [(ngModel)] и работать непосредственно с элементом ввода.

Вам необходимо добавить Renderer2 в ваш компонент, а затем обновить значение представления с помощью

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

, где элемент является ссылкой на элемент ввода, например, @ ViewChild

Лучшей практикой для вашей задачи является создание пользовательского компонента или директивы, которая реализует ControlValueAccessor и использует Renderer2 внутри.

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

Answer 3

Вы звоните inputChange(), который меняет имя свойства на "Зебра".Вы уже реализовали двустороннюю привязку.Поэтому нет необходимости вызывать функцию события.

Измените это:

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

на

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

Чтобы проверить значение, у вас есть несколько вариантов, чтобы сделатьтак.1 из них получает ссылку на объект элемента HTML.

Это можно сделать следующим образом:

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

В файле компонента:

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

И удалитьдвусторонняя привязка курса [(ngModel)]="name"