Событие изменения вызывается только после изменения фокуса ввода. Как я могу сделать так, чтобы событие запускалось при каждом нажатии клавиши?


{{mymodel}}

Вторая привязка меняется при каждом нажатии клавиши, кстати.

daniel

Ответов: 13

Ответы (13)

Я просто использовал ввод событий, и он работал нормально:

в файле .html:


в файле .ts:

onSearchChange (searchValue: string): void {
  console.log (searchValue);
}

архив .ts

myMethod (значение: строка) {
...
...
}

Лучше всего использовать событие (keyup).

Посмотрим, почему:

  1. (изменение) как вы упомянули, триггеры только тогда, когда ввод теряет фокус, следовательно, имеет ограниченное использование.
  2. (нажатие клавиши) срабатывает при нажатии клавиш, но не запускается при определенных нажатиях клавиш, таких как возврат.
  3. (keydown) срабатывает каждый раз при нажатии клавиши. Следовательно, всегда отстает на 1 символ; поскольку он получает состояние элемента до регистрации нажатия клавиши.
  4. (keyup) - ваш лучший выбор, поскольку он срабатывает каждый раз, когда завершается событие нажатия клавиши, поэтому сюда также входит самый последний символ.

Так что (keyup) - самый безопасный вариант, потому что он ...

  • регистрирует событие при каждом нажатии клавиши, в отличие от события (изменения)
  • включает клавиши, которые (нажатие клавиши) игнорирует
  • не имеет задержек, в отличие от события (keydown)

Вы ищете


{{mymodel}}

Затем делайте с данными все, что хотите, обратившись к привязке this.mymodel в вашем файле .ts.

Другой способ справиться с такими случаями - использовать formControl и подписаться на него valueChanges при инициализации вашего компонента, что позволит вам использовать rxjsоператоры для расширенных требований, таких как выполнение HTTP-запросов, применять дебонс до тех пор, пока пользователь не закончит писать предложение, взять последнее значение и пропустить предыдущее, ...

импорт {Component, OnInit} из '@ angular / core';
импортировать {FormControl} из '@ angular / forms';
импортировать {debounceTime, independentUntilChanged} из 'rxjs / operator';

@Компонент({
  селектор: 'какой-то-селектор',
  шаблон: `
    
  `
})
класс экспорта SomeComponent реализует OnInit {
  частный searchControl: FormControl;
  приватный дебаунс: число = 400;

  ngOnInit () {
    this.searchControl = новый FormControl ('');
    this.searchControl.valueChanges
      .pipe (debounceTime (this.debounce), independentUntilChanged ())
      .subscribe (query => {
        console.log (запрос);
      });
  }
}

Я использовал клавиатуру в числовом поле, но сегодня я заметил в chrome, что на входе есть кнопки вверх / вниз для увеличения / уменьшения значения, которое не распознается клавиатурой.

Мое решение - использовать клавиатуру и менять вместе:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

Первоначальные тесты показывают, что это работает нормально, мы отправим ответ, если после дальнейшего тестирования будут обнаружены какие-либо ошибки.

На этот вопрос было дано несколько ответов. Однако, если вы хотите взглянуть на другой способ, связанный с добавлением некоторой задержки, прежде чем предпринимать какие-либо действия в отношении события изменения, вы можете использовать метод debounceTime () с угловой формой valuechanges (). Этот код нужно добавить в ловушку ngOnInit () или создать отдельный метод и вызвать его из ngOnInit ().

  ngOnInit(): void {
    this.formNameInputChange();
  }

  formNameInputChange(){
    const name = this.homeForm.get('name'); // Form Control Name
    name?.valueChanges.pipe(debounceTime(1000)).subscribe(value => {
      alert(value);
    });
  }
  // this is reactive way..
  homeForm = this.fb.group({
    name:['']
  });

Секретное событие, которое поддерживает синхронизацию angular ngModel, - это вызов события input. Следовательно, лучший ответ на ваш вопрос должен быть:


{{mymodel}}

Для реактивных форм вы можете подписаться на изменения, внесенные во все поля или только на конкретное поле.

Получить все изменения FormGroup:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

Получить изменение определенного поля:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

Используйте ngModelChange, разбив синтаксис [(x)] на две части, то есть привязку данных свойств и привязку событий:


{{mymodel}}
valuechange (newValue) {
  mymodel = newValue;
  console.log (новое значение)
}

Работает и для клавиши Backspace.

Мне удалось решить эту проблему в Angular 11, используя следующий код:


И, experienceToAndFrom () - это метод в моем компоненте.

PS: Я пробовал все вышеперечисленные решения, но не сработало.

В моем случае решение:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

2022 WebDevInsider