Как отразить / выделить введенные вручную месяцы на средстве выбора месяца с помощью DoCheck [Angular]

Question

Мне нужна твоя помощь. Я буквально заблокирован из-за простой вещи. Я также создал стек стека, но сначала я объясню проблему. Это довольно сложно, пожалуйста, потерпите меня. Я создал собственный селектор временного диапазона. Допустимый диапазон: 02-01-2019 - 09-01-2020. Формат mm-dd-yyyy. Я создал правильный интерфейс для этого. Выбор может быть сделан двумя способами:

1. Нажав на месяцы. [Эта функция работает отлично]
2. Путем ввода даты вручную [Это не работает. Здесь мне нужна помощь]

Я также делаю базовую проверку c с использованием moment:

1. Допустимые годы: [2016, 2019]
2. startRange не должно быть после endRange '
3. Формат должен быть mm-dd-yyyy

Примечание: startRange и endRange - две [(ngModel)] переменные связывания для полей ввода начала, конца, конца диапазона соответственно.

monthpicker.component. html

<div class="wrapper" [class.warning-border]="isApplied">
   <input type="text" [(ngModel)]="startRange" class="start-range custom-input-field">
   ....
   <input type="text" [(ngModel)]="endRange" class="end-range custom-input-field">
   ....
</div>

Вот список важных методов в monthpicker.component .ts :

1. onClick(indexClicked) - этот метод вызывается при каждом нажатии на название месяца. Это для выбора с помощью щелчков мыши. На данный момент он работает нормально.
2. triggerReflection() - Этот метод следует вызывать, когда я вводю даты с клавиатуры. Это вызовет метод проверки validate(startRange,endRange), который проверит вышеупомянутые критерии. Если оба диапазона хороши, то, наконец, вызывается monthReflection(), который фактически отражает выбор в лотке выбора месяца.

Вот код:

triggerReflection() {
    ....
      ....
        this.validate(this.startRange, this.endRange);
        if (this.isValidRange) {
            this.monthRangeReflection();
        } else {
            this.isValidRange = false;
        }
    } ....
}

Но отражение не происходит Я проверил много решений. Я использую DoCheck, так как я хочу, чтобы проверка происходила при вводе дат:

ngDoCheck(): void {
    this.validate(this.startRange, this.endRange);
    console.log("ngDocheckCalled");   
}

Я хочу, чтобы отражение в диапазоне на лотке для месяцев автоматически, если диапазон действителен. Я не хочу использовать (keydown)=triggerReflection(), потому что тогда мне придется нажать какую-нибудь клавишу. Я не хочу этого Вот стек стека . Пожалуйста, найдите компонент monthpicker. Это только мы должны исправить.

Не стесняйтесь спрашивать дополнительную информацию. Пожалуйста, помогите мне. Я перепробовал много решений, теперь Stackoverflow - моя последняя надежда.

Answer 1

Решение такое же, как и в вашем другом вопросе. Подпишитесь на valuesChanges наблюдаемых ваших полей ввода. С помощью всего лишь пары строк кода вы можете вызвать this.triggerReflection, когда пользователь вводит даты вручную. Вы должны настроить подписку в хуке жизненного цикла AfterViewInit:

export class MonthpickerComponent implements OnInit, DoCheck, AfterViewInit {
    @Output() outputToParent = new EventEmitter<string>();
    @Output('timeselectorValidation') timeselectorValidation: EventEmitter<any> = new EventEmitter();

    @ViewChildren(NgModel) dateRefs: QueryList<NgModel>;

    ngAfterViewInit() {
      this.dateRefs.forEach(ref => 
        ref.valueChanges.subscribe(() =>
          this.triggerReflection()
        )
      )
    }

Проверьте разветвленный Stackblitz, который я получил из вашего кода: https://stackblitz.com/edit/angular-dcugua. Выше приведено единственное изменение (плюс добавлен console.log в методе triggerReflection).