Automatic hyphens while typing date, in input type date, Angular 5

Question

How can i get automatic hyphens in input type date, while typing date?

e.g. i want output something like this... If i want to type date 2018-06-18, while typing after 2018, "-" should be automatically shown and append to 2018 and binding on variable on .ts should be 2018-, same after 06, 2018-06-.

I have controlled input via (keypress) function on input..

In .ts file..

  keypress(event: any) {
    const pattern = /[0-9\- ]/
    let inputChar = String.fromCharCode(event.charCode);
    if (event.keyCode != 8 && !pattern.test(inputChar)) {
      event.preventDefault();
    }
  }

In HTML file...

<input maxlength="10" minlength="10" (keypress)="keypress($event)" placeholder="YYYY-MM-DD" name="dateOfBirth" [(ngModel)]="pupil.dateOfBirth" required>