title: Angular input field data format
body: <p>Angular template input field should take maxLength: mm/dd/yyyy = 10;</p>
  <pre><code> &lt;input
    class=&quot;form-control&quot;
    type=&quot;text&quot;
    appInputMask
    formControlName=&quot;expiryDate&quot;
    id=&quot;expiry-date&quot;
    maxlength=&quot;4&quot;
  /&gt;
  </code></pre>
  <p>Found this Directive appInputMask that does the job form the format MM/YY, but I need MM/DD/YYYY.</p>
  <pre><code>import { Directive, HostListener } from '@angular/core';
  
  @Directive({
    selector: '[formControlName][appInputMask]',
  })
  export class InputMaskDirective {
  
    @HostListener('input', ['$event'])
    onKeyDown(event: KeyboardEvent) {
      const input = event.target as HTMLInputElement;
  
      const trimmed = input.value.replace(/\s+/g, '').slice(0, 4);
      if (trimmed.length &gt; 3) {
        return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);
      }
    }
    
  }
  </code></pre>
  <p>I'm playing around trying to get the correct format, but not successfull, thanks for any help.</p>
  <p><a href="https://stackblitz.com/edit/angular6-mask-34t827input-6rxqq9?file=app%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular6-mask-34t827input-6rxqq9?file=app%2Fapp.component.html</a></p>