title: How to display Custom Validation error message using "app-form-group-control-validation-display" in angular 4
body: <p>We are using FormBuilder, FormGroup, Validators, FormControl to check and display validations. For date validation I have used Custom validation. For this I have created a validation directive DateTypeValidationDirective. Please see the below code snippet.</p>
  
  <pre><code>import { Directive, Input } from "@angular/core";
  import { NG_VALIDATORS, Validator, AbstractControl, ValidatorFn } from "@angular/forms";
  import * as moment from "moment";
  
  @Directive({
      selector: '[date]',
      providers: [{ provide: NG_VALIDATORS, useExisting:
                  DateTypeValidatorDirective, multi: true }]
  
  })
  
  export class DateTypeValidatorDirective implements Validator {
      @Input() dDate: Date;
      validate(control: AbstractControl): { [key: string]: any } {
          return this.dDate ? this.dateTypeValidator()(control)
              : null;
      }
      dateTypeValidator(): ValidatorFn {
          return (control: AbstractControl): { [key: string]: any } =&gt; {
              const valid = control.value == '' || moment(moment(control.value).format("l LT"), ["l LT"], true).isValid() 
  
              if (!valid) {
                  return {
                        'dateType': { value: "invalid date" }
                  }; 
              }    
           };
     }
  }
  </code></pre>
  
  <p>In component I have used the below code snippet</p>
  
  <pre><code>ngOnInit(): void {
       this.formGroupCore = this.formBuilder.group({
  
       dueDate: new FormControl("", 
       [this.dateTypeValidatorDirective.dateTypeValidator()])
      });
  }
  </code></pre>
  
  <p>In html file written the below code</p>
  
  <pre><code>&lt;input id="dueDate" type="date" formControlName="dueDate" 
              class="form-control form-control-sm" /&gt;
  
  &lt;app-form-group-control-validation-display
      *ngIf="formGroupCore.get('dueDate').hasError(error)" 
      [formGroup]="formGroupCore" [propertyName]="'dueDate'" &gt;invalid date
  &lt;/app-form-group-control-validation-display&gt;
  </code></pre>
  
  <p>The validation is working fine but error message is not displaying. How to set the error message?</p>
  
  <p>Please anyone help to achieve the same </p>