title: Validation error message doesn't appear for custom DatePicker Angular Formly field
body: <p>I'm trying to use <a href="https://dalelotts.github.io/angular-bootstrap-datetimepicker/" rel="nofollow noreferrer">Angular Datetime Picker</a> as a <a href="http://angular-formly.com/" rel="nofollow noreferrer">Angular Formly</a> input type. I've got it working such that I can edit and set a value that is correctly added to the binded model.</p>
  
  <p>However, I can't get the validation error messages to display like on the regular input fields.</p>
  
  <p><a href="https://jsbin.com/zufoxokehe/1/edit" rel="nofollow noreferrer">JS Bin with what I've got so far</a>. As you can see the red color doesn't appear when you exit the field, only when you try to submit. And the error message never shows up.</p>
  
  <p><strong>Formly Config</strong>:</p>
  
  <pre><code>formlyConfigProvider.setType({
    name: 'datepicker',
    templateUrl: "custom-template.html",
    overwriteOk: true,
    wrapper: ['bootstrapHasError'],
    defaultOptions: function defaultOptions(options) {
      return {
        templateOptions: {
          validation: {
            show: true
          }
        }
      };
    }
  });
  
  formlyConfigProvider.setWrapper({
    name: 'validation',
    types: ['input', 'datepicker'],
    templateUrl: 'error-messages.html'
  });
  </code></pre>
  
  <p><strong>Fields</strong></p>
  
  <pre><code>vm.fields = [
    {
      key: 'text',
      type: 'input',
      templateOptions: {
        label: 'Text',
        placeholder: 'Write something',
        required: true
      },
    },
    {
      key: 'date',
      type: 'datepicker',
      templateOptions: {
        label: 'Date',
        placeholder: 'Pick a date',
        required: true
      },
    }
  ];
  </code></pre>
  
  <p><strong>Templates</strong></p>
  
  <pre><code>&lt;script type="text/ng-template" id="custom-template.html"&gt;
    &lt;div class="form-group"&gt;
  
        &lt;label class="control-label" for="{{::id}}"&gt;{{to.label}} {{to.required ? '*' : ''}}&lt;/label&gt;
        &lt;div class="dropdown"&gt;
            &lt;a class="dropdown-toggle" id="dropdown-{{options.key}}" role="button" data-toggle="dropdown"&gt;
            &lt;div class="input-group"&gt;
                &lt;input id="{{::id}}" name="{{::id}}" type="text" data-date-time-input="YYYY-MM-DD" class="form-control" data-ng-model="model[options.key]"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
            &lt;datetimepicker
                data-ng-model="model[options.key]"
                data-datetimepicker-config="{ dropdownSelector: '#dropdown-' + options.key, minView: 'day', startView: 'year', modelType: 'YYYY-MM-DDTHH:mm:ssZ'}"/&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/script&gt;
  
  &lt;script type="text/ng-template" id="error-messages.html"&gt;
    &lt;formly-transclude&gt;&lt;/formly-transclude&gt;
    &lt;div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched" class="error-messages"&gt;
      &lt;div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message"&gt;{{ message(fc.$viewValue, fc.$modelValue, this)}}&lt;/div&gt;
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>