ng-formly When there is an error in the cell, the cell is not marked as invalid (red border)

i am trying to convert using of angular-formly (angulr1) to ng-formly(angulr2).

i am using bootstrap css.

my problem is that when the value in the cell is invalid (required or min/max...) a message error displayed under the cell but the border of the cell is still blue (valid value) instead red (invalid value) (bootstrap behavior). and the biggest problem is that the form validation is 'VALID'.

I attach an example that works properly based on a link http://ift.tt/2hdh0oj

my sources:

1.app.module.ts

import {NgModule,enableProdMode} from '@angular/core';
import {FormsModule, ReactiveFormsModule, Validators, FormBuilder, 
 FormGroup, FormControl} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {FormlyModule,FormlyFieldConfig, FormlyBootstrapModule} from 'ng-
 formly';
import {AppComponent} from './app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';



@NgModule({
  imports: [
   BrowserModule,
   FormsModule,
   ReactiveFormsModule,
   FormlyModule.forRoot({
     types: [
    { name: 'dateFormat', defaultOptions: { templateOptions: {
      placeholder: 'dd/mm/yyyy such as 20/05/2015',
      dateFormat: 'DD, d  MM, yy',
      addonLeft: {
        class: 'fa fa-usd',
      },
    },
    validators: {
      date: control => control.value.match(/^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/) 
      },
    },
  }
],
  validators: [{ name: 'required', validation: Validators.required}],
  validationMessages: [
    { name: 'required', message: (err, field) => `${field.templateOptions.label} is required.`},
    { name: 'invalidEmailAddress', message: 'Invalid Email Address' },
    { name: 'maxlength', message: 'Maximum Length Exceeded.' },
    { name: 'minlength', message: (err) => {
        return `Should have atleast ${err.requiredLength} Characters`;
      },
    }
  ]
}),
FormlyBootstrapModule,
],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule {
 }

app.component.ts

import {NgModule,enableProdMode} from '@angular/core';
import {FormsModule, ReactiveFormsModule, Validators, FormBuilder, 
FormGroup, FormControl} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {FormlyModule,FormlyFieldConfig, FormlyBootstrapModule} from 'ng-            
    formly';
import {AppComponent} from './app.component';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';



@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    FormlyModule.forRoot({
      types: [
    { name: 'dateFormat', defaultOptions: { templateOptions: {
      placeholder: 'dd/mm/yyyy such as 20/05/2015',
      dateFormat: 'DD, d  MM, yy',
      addonLeft: {
        class: 'fa fa-usd',
      },
    },
    validators: {
      date: control => control.value.match(/^(0?[1-9]|[12][0-9]|3[01])[\/\-]
     (0?[1-9]|1[012])[\/\-]\d{4}$/) 
      },
    },
  }
],
  validators: [{ name: 'required', validation: Validators.required}],
  validationMessages: [
    { name: 'required', message: (err, field) => 
   `${field.templateOptions.label} is required.`},
    { name: 'invalidEmailAddress', message: 'Invalid Email Address' },
    { name: 'maxlength', message: 'Maximum Length Exceeded.' },
    { name: 'minlength', message: (err) => {
        return `Should have atleast ${err.requiredLength} Characters`;
      },
    }
  ]
 }),
FormlyBootstrapModule,
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule {
}