Inconsistent validation issue in Angular custom component

I have faced the same task and I have taken a different approach in handling binding and change of the local model.

Instead of separating and manually setting an ngModelChange callback, I have hidden my local variable behind a pair of getter\setters, where my callback is called.

In your case, the code would look like this:

in custom-datepicker.component.html:

<input matInput        #innerNgModel="ngModel"        [matDatepicker]="#picker"        [(ngModel)]="modelValue"        [disabled]="disabled"        [required]="required"        [placeholder]="placeholder"        [min]="min"        [max]="max">

while in custom-datepicker.component.ts:

  get modelValue(){      return this._modelValue;  }  set modelValue(newValue){     if(this._modelValue != newValue){          this._modelValue = newValue;          this.emitChange();     }  }  public writeValue(data) {        this.modelValue = data ? moment(data) : null;  }

You can see the actual component in https://github.com/cdigruttola/GestioneTessere/tree/master/Server/frontend/src/app/viewedit

I don't know if it will make a difference, but I have seen no problem in validation handling while I was testing the application and none has been reported to me by the actual users.