title: Angular free text datepicker that will auto populate slashes(MM/DD/YYYY)
body: <p>I'm using the datepicker (ng-bootstrap) in a popup, I want this field also allow user to insert date manually (<code>MM/DD/YYYY</code>) but instead of asking user for entering slash it should auto populate slash.  </p>
  
  <p>Angular 8 and <code>@ng-bootstrap/ng-bootstrap</code>, I wrote a handler on keyup event trying to append slash and setting the values to form but it is not allowing me, I've tried removing the validator on form-control so validation happen only after user enter date completely rather than partial input. </p>
  
  <p>I have created handler on keyup event </p>
  
  <pre><code>&lt;div class="form-group" [ngClass]="displayFieldStyle(form,'abc')"&gt;
  &lt;div class="input-group"&gt;
      &lt;input formControlName="abc" class="form-control" ngbDatepicker 
      #abc="ngbDatepicker" [minDate]="minDate" [maxDate]="maxDate" 
      minlength="10" maxlength="10" placeholder="MM/DD/YYYY" 
      (keyup)="onKeyEventHandler($event)" /&gt;
  
      &lt;div class="input-group-append" (click)="abc.toggle()"&gt;
          &lt;span class="input-group-text"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; 
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  this.memberLookupForm = this.formBuilder.group({
  ...
  ...
  abc: ['', Validators.compose([Validators.required, 
               DateValidator.checkDateFormat])],
  ...
  ...
  });
  
  
  onKeyEventHandler(event: KeyboardEvent): void {
      if (event.which !== 191 ) {
        let currentValue= this.form.get('abc').value;
        if(!(currentValue == "" || currentValue == null)){
          let numChars = currentValue.length;
          if(numChars === 2 || numChars === 5){
            currentValue = currentValue+'/';
            this.form.get('abc').setValidators(null);
            this.form.controls['abc'].setValue(currentValue);
            this.form.get('abc').updateValueAndValidity();
          }
        }
     }
  }
  
  
  
  const value = c.value;
  let match;
  const datePattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
  if (value) {
      if (typeof value === 'string') {
          match = value.match(datePattern);
          if (!match) {
              return {'invalidDateFormat': true};
          }
      }
  }
  </code></pre>
  
  <p>but form value resetting after two entering values that <code>12</code> resetting to "" (empty), but var in component have value <code>12/</code>.</p>
  
  <p>I want to auto populate slash for date field (<code>MM/DD/YYYY</code>) => after user enters two values and four values example that is <code>12</code> make it to <code>12/</code> then user proceed to <code>12/20</code> make it to <code>12/20/</code> user continue to <code>12/20/2019</code>.</p>