How to reflect/highlight manually entered months on the monthpicker using DoCheck [Angular]

Question

I need your help. I'm literally blocked because of a simple thing. I've created a stackblitz also but first I'll explain the problem. It's quite complicated, please bear with me. I've created a time range selector of my own. A valid range is this: 02-01-2019 - 09-01-2020. The format is mm-dd-yyyy. I've created a proper UI for this. The selections can be made in two ways:

1. By clicking on the months. [This feature is working perfectly]
2. By entering dates manually [This is not working. Here I need help]

I'm also doing basic validation using moment:

1. Valid years are [2016, 2019]
2. startRange should not be after endRange'
3. Format should be mm-dd-yyyy

Note: startRange and endRange are two [(ngModel)] bind variables for start end end range's input fields respectively.

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>

Here's the list of important methods in monthpicker.component.ts:

1. onClick(indexClicked) - This method is called whenever a month name is clicked. This is for making selections using mouse clicks. It is working fine as of now.
2. triggerReflection() - This method should be called when I enter the dates through keyboard. This will call the validation method validate(startRange,endRange) which will check above mentioned criteria. If both ranges are good, then finally monthReflection() is called which will actually reflect the selection on the month picker tray.

Here's the code:

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

But the reflection is not happening. I've checked many solutions. I'm using DoCheck as I want the validation to happen as I type-in the dates:

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

I want the reflection on the range on the month tray automatically if the range is valid. I don't want to use (keydown)=triggerReflection() because then I'll have to press some key. I don't want that. Here's the stackblitz. Please find the component monthpicker. This only we've to fix.

Feel free to ask for more information. Please help me. I've tried many solutions, now Stackoverflow is my last hope.

Answer 1

The solution is the same as in your other question. Subscribe to the valuesChanges observable of your input fields. With just a couple of lines of code you can call the this.triggerReflection when the user enters the dates manually. You have to set up the subscription in the AfterViewInit lifecycle hook:

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()
        )
      )
    }

Check the Stackblitz I forked from your code: https://stackblitz.com/edit/angular-dcugua. The above is the only change I made (plus added a console.log in the triggerReflection method).