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

Question

У меня есть компонент ввода для времени.Я хочу выполнить некоторые входные модификации, чтобы время не выходило за пределы.

Это выдержка из разметки HTML

<input
        (change)="hoursChange($event.target.value)"
        (keypress)="onlyNumHandler($event)"
        (blur)="onBlur('hours')"
        [ngModel]="hours"
        [readonly]="readonly"
        [disabled]="!dateVal"
        placeholder="23"
        type="text"
        matInput
    >

Здесь dateVal - это экземпляр Moment.

И этомоя функция изменять часы на входе

hoursChange(val: string): void {
        const numVal = Number(val);

        if (isNaN(numVal) || !isFinite(numVal)) {
            this.hours = '00';
        } else if (numVal > 23) {
            this.hours = '23';
        } else {
            this.hours = val;
        }

        this.dateVal.set({
            hour: Number(this.hours)
        });

        this.changeDate(this.dateVal);
    }

Проблема в том, что я не могу заставить его работать на входе.Изменяет входное значение только при размытии.Если я изменяю (change) на (input), он изменяет значение только один раз, когда достигает максимального предела.

Хитрость заключается в том, что функция все устанавливает успешно (то есть hours опора на это должна быть и момент объектаустановлены правильные часы), однако показанное входное значение все еще не 23, а 999 (в случае ввода 999).

Я не знаю, имеет ли это значение, но я 've enabled ChangeDetectionStrategy.OnPush.

---

Примерное поведение, которое я наблюдаю https://stackblitz.com/edit/angular-hjlded

Answer 1

Поэтому я бы предложил другой подход - передать элемент ref в функцию, а затем обновить его значение: Пример Stackbliz

Передать элемент ref в шаблон:

<input  
        #input
        //Pass the element ref into hoursChange(...)
        (ngModelChange)="hoursChange($event, input)"
        (keypress)="onlyNumHandler($event)"
        (blur)="onBlur('hours')"
        [ngModel]="hours"
        [readonly]="readonly"
        [disabled]="!dateVal"
        placeholder="23"
        type="text"
        matInput
    >

В вашем TS

  hoursChange(val: string, input ): void {
    const numVal = Number(val);

    if (isNaN(numVal) || !isFinite(numVal)) {
      this.hours = '00';
    } else if (numVal > 23) {
      this.hours = '23';
    } else {
      this.hours = val;
    }
    //Change via element ref
    input.value = this.hours;   

    this.dateVal.set({
      hour: Number(this.hours)
    });
  }

Объясните для проблемы:

Если вы посмотрите на исходный код директивы ngModel , в line 221 триггерная функция ngOnChange isPropertyUpdated() - что является условием для ngModelChange событие для отправки измененного значения и обновления viewModel, эта функция объявлена ​​внутри shared.ts файла в line 153.

И я полагаю, что функция isPropertyUpdated() будет возвращать false, за исключением первого события изменения, инициированного - что приведет к возникновению связанной переменной из ваших component.ts через [ngModel], чтобы шаблон действительно работал только один раз (сработало событие первого изменения).

И я думаю, что это происходит, когда банан в коробке [(ngModel)] разделен, что делает модель looseIdentical и все же я не нашел ответачто меня еще удовлетворило насчет углового looseIdentical определения.Но я надеюсь, что приведенная выше информация может помочь вам в этом.