title: How to implement a custom date validation for Out of Stock days
body: <p>I am trying to implement a custom date validator where I can check if the date entered is not in a list of invalid dates (array of custom dates, ex: <code>['08/20', '08/24', '08/31']</code>) (Out of Stock) using Angular reactive forms.</p>
  
  <p>My validator looks like this:</p>
  
  <pre><code>export function OutOfStockValidator(invalidDates: any): ValidatorFn {
      return (control: AbstractControl): { [key: string]: boolean } | null =&gt; {
          if (!invalidDates) { return null; }
          let isInvalid = false;
          for (const i in invalidDates) {
              const d = moment(control.value).format('MM' ) + '/' + moment(control.value).format('DD');
              if (d == invalidDates[i]) { isInvalid = true; }
          }
  
          return isInvalid ? { outOfStock: true } : null;
      };
  }
  </code></pre>
  
  <p>This is how the definition of the control looks like:</p>
  
  <pre><code>this.form = this._formBuilder.group({
      installDate: new FormControl(null, [Validators.required, OutOfStockValidator(this._order.InvalidDates['CARPET_AM'])]),
      ...
  });
  </code></pre>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;div class="row"&gt;
          &lt;label [for]="installDate" class="col-md-12 col-form-label font-weight-bold"&gt;Install Date&lt;/label&gt;
          &lt;div class="col-md-12"&gt;
              &lt;kendo-datepicker #installDate formControlName="installDate" placeholder="" class="form-control col-md-6" [min]="today"&gt;
                  &lt;ng-template kendoCalendarMonthCellTemplate let-date&gt;
                      &lt;span [ngClass]="isInvalidDate(date)"&gt;{{date.getDate()}}&lt;/span&gt;
                  &lt;/ng-template&gt;
              &lt;/kendo-datepicker&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div *ngIf="submitted &amp;&amp; f.installDate.outOfStock" class="invalid-feedback d-block"&gt;
          &lt;p&gt;Selected date is not available for selection&lt;/p&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The widget works good, but I can not display my custom message: Selected date is not available for selection.</p>
  
  <p>Any idea? Thanks!</p>