ng-bootstrap timepicker

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>ng2-formly example</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0-alpha.5/dist/css/bootstrap.min.css">

    <script src="https://unpkg.com/zone.js@0.6.26/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.26/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <formly-example-app>
      loading...
    </formly-example-app>
  </body>

</html>

/* Styles go here */

### ng2-formly example - Typescript

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core@2.1.1/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common@2.1.1/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler@2.1.1/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser@2.1.1/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@2.1.1/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http@2.1.1/bundles/http.umd.js',
    '@angular/router': 'npm:@angula/router@3.1.1/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms@2.1.1/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core@2.1.1/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common@2.1.1/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler@2.1.1/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser@2.1.1/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic@2.1.1/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http@2.1.1/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router@3.1.1/bundles/router-testing.umd.js',
    
    '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.13/bundles/ng-bootstrap.js',
    
    'ng2-formly': 'npm:ng2-formly@2.0.0-beta.13/bundles/ng2-formly.umd.min.js',
    'rxjs': 'npm:rxjs@5.0.0-beta.12',
    'typescript': 'npm:typescript@2.0.3/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

import {NgModule, Component, ViewChild, ViewContainerRef} from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FormsModule, ReactiveFormsModule, Validators, FormBuilder, FormGroup} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';


import {FormlyModule, FormlyFieldConfig, FormlyBootstrapModule, Field, FieldWrapper} from 'ng2-formly';
const states = ['Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado',
  'Connecticut', 'Delaware', 'District Of Columbia', 'Federated States Of Micronesia', 'Florida', 'Georgia',
  'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine',
  'Marshall Islands', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
  'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Northern Mariana Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virgin Islands', 'Virginia',
  'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  
@Component({
  selector: 'formly-example-app',
  templateUrl: 'template.html',
})
export class FormlyExampleApp {
  form: FormGroup;
  author;
  env;
  model: any = {};
  private fields: Array<FormlyFieldConfig> = [];

  constructor(fb: FormBuilder) {
    this.form = fb.group({});

    this.author = {
      name: '',
      url: ''
    };
    
    this.env = {
      angularVersion: '2.1.1',
      formlyVersion: '2.0.0-beta.13' 
    };
    
    this.fields =  [
      {
        key: 'email',
        type: 'timepicker',
        templateOptions: {
          label: 'Username',
          options: (text$: Observable<string>) =>
            text$
            .debounceTime(200)
            .distinctUntilChanged()
            .map(term => term.length < 2 ? []
              : states.filter(v => new RegExp(term, 'gi').test(v)).splice(0, 10));
        }
      }
    ];

    this.model = {
      
    };
  }
}

@Component({
  selector: 'formly-timepicker',
  template: `
    <ngb-timepicker [formControl]="formControl"></ngb-timepicker>
  `,
})
export class FormlyTimePicker extends Field {
}

@NgModule({
  declarations: [
    FormlyExampleApp, FormlyTimePicker
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    FormlyModule.forRoot({
      types: [{
        name: 'timepicker', component: FormlyTimePicker, extends: 'input'
      }]
    }),
    FormlyBootstrapModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  bootstrap: [FormlyExampleApp]
})
export class AppModule {
}

<div class="container">
    <h1>ng2-formly ng-bootstrap time picker example:</h1>
    <p>An example of how to use a custom FieldWrapper with ng-bootstrap's tabset and tab components, allowing fields and fieldGroups to be composed into tabs.</p>
    <hr>
    <form class="formly" role="form" novalidate [formGroup]="form">
        <formly-form [model]="model" [fields]="fields" [form]="form">
            </formly-form>
        
    </form>
    <hr>
    <br><strong>FORM DATA:</strong><br><pre>{{model | json}}</pre><br>
    <br><strong>FIELD DATA:</strong><br><pre>{{fields | json}}</pre><br>

    <div style="margin-top:30px">
        <small>
            This is an example for the
            <a href="https://formly-js.github.io/ng2-formly">ng2-formly</a>
            project made with ♥ by
            <strong>
            <span *ngIf="!author.name || !author.url">
              {{author.name || 'anonymous'}}
            </span>
            <a ng-if="author.url" href="{{author.url}}">
                {{author.name}}
            </a>
            </strong>
            <br />
            This example is running angular version "{{env.angularVersion}}" and formly version "{{env.formlyVersion}}"
        </small>
    </div>
</div>