feat: added Datepicker

package.json

@@ -24,6 +24,7 @@
     "@angular/http": "^6.0.4",
     "@angular/platform-browser": "^6.0.4",
     "@angular/platform-browser-dynamic": "^6.0.4",
+    "@ng-bootstrap/ng-bootstrap": "^4.0.2",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
     "fork-ts-checker-webpack-plugin": "^0.5.2",

src/app.ts

@@ -16,7 +16,9 @@ import { FormRadioComponent } from './app/components/form-radio/form-radio.compo
 import { FormTextareaComponent } from './app/components/form-textarea/form-textarea.component';
 import { FormInputHiddenComponent } from './app/components/form-hidden/form-hidden.component';
 import { FormLabelComponent } from './app/components/form-label/form-label.component';
+import { FormDateComponent } from './app/components/form-date/form-date.component';
 import { FIELD_DICT_TOKEN, FieldDictionary } from './app/types';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 const defaultInputs: FieldDictionary = {
     text: FormInputComponent,
@@ -26,7 +28,8 @@ const defaultInputs: FieldDictionary = {
     hidden: FormInputHiddenComponent,
     radio: FormRadioComponent,
     checkbox: FormCheckboxComponent,
-    label: FormLabelComponent
+    label: FormLabelComponent,
+    date: FormDateComponent
 };
 
 @NgModule({
@@ -37,21 +40,22 @@ const defaultInputs: FieldDictionary = {
         FormsModule,
         QuillModule,
         TagInputModule,
-        FormNavModule
+        FormNavModule,
+        NgbModule
     ],
     declarations: [
         DynamicFieldDirective,
         DynamicFormComponent,
         DynamicPanelComponent,
-
         FormInputComponent,
         FormSelectComponent,
         FormTextEditorComponent,
         FormTextareaComponent,
         FormInputHiddenComponent,
         FormRadioComponent,
         FormCheckboxComponent,
-        FormLabelComponent
+        FormLabelComponent,
+        FormDateComponent
     ],
     exports: [
         DynamicFormComponent
@@ -64,7 +68,8 @@ const defaultInputs: FieldDictionary = {
         FormInputHiddenComponent,
         FormRadioComponent,
         FormCheckboxComponent,
-        FormLabelComponent
+        FormLabelComponent,
+        FormDateComponent
     ],
     providers: [
         {

src/app/components/dynamic-field/dynamic-field.directive.ts

@@ -20,9 +20,8 @@ export class DynamicFieldDirective implements Field, OnInit, OnDestroy {
     ) { }
 
     ngOnInit() {
-        if (!this.group) {
-            throw new Error('group is not set');
-        }
+        if (!this.group) { throw new Error('group is not set'); }
+        if (!this.inputs[this.field.type]) { throw new Error(`Input with type "${this.field.type}" was not found`); }
 
         const componentReference = this.inputs[this.field.type];
         const component = this.resolver.resolveComponentFactory<Field>(componentReference);

src/app/components/form-date/form-date.component.html

@@ -0,0 +1,8 @@
+<div class="row" [formGroup]="group">
+    <label class="col-md-2 font-weight-bold col-form-label">{{field.label}}
+        <span class="required-icon" [hidden]="!field.required">*</span>
+    </label>
+    <div class="col-md-10">
+        <ngb-datepicker [formControlName]="field.name"></ngb-datepicker>
+    </div>
+</div>

src/app/components/form-date/form-date.component.spec.ts

@@ -0,0 +1,52 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormDateComponent as Type} from './form-date.component';
+import { ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
+import { APP_BASE_HREF } from '@angular/common';
+import { By } from '@angular/platform-browser';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+
+describe('FormInputComponent', () => {
+    let component: Type;
+    let fixture: ComponentFixture<Type>;
+    let directiveEl;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                FormsModule,
+                ReactiveFormsModule,
+                NgbModule
+            ],
+            declarations: [Type],
+            providers: [
+                { provide: APP_BASE_HREF, useValue: '/' }
+            ]
+        }).compileComponents()
+            .then(() => {
+                fixture = TestBed.createComponent(Type);
+                component = fixture.componentInstance;
+
+                component.field = { type: "text", name: "test", required: true };
+                component.group = new FormGroup({
+                    test: new FormControl('')
+                });
+
+                fixture.detectChanges();
+            });
+    }));
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('ensures component is rendered', () => {
+        directiveEl = fixture.debugElement.query(By.css('ngb-datepicker-navigation'));
+        expect(directiveEl.nativeElement).toBeDefined();
+    });
+
+    it('ensures required asterix appears', () => {
+        directiveEl = fixture.debugElement.query(By.css('span'));
+        expect(directiveEl).toBeTruthy();
+    });
+
+});

src/app/components/form-date/form-date.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Field } from '../../types';
+import { FieldConfig } from '../../types';
+@Component({
+    selector: 'form-date',
+    template: require('./form-date.component.html')
+})
+export class FormDateComponent implements Field  {
+    field: FieldConfig;
+    group: FormGroup;
+}

src/app/containers/dynamic-form/dynamic-form.component.ts

@@ -19,7 +19,6 @@ export class DynamicFormComponent implements OnInit {
     get value() { return this.form.value; }
     get rawValue() { return this.form.getRawValue(); }
 
-
     // TODO: convert this into visitor or something like that
 
     public ngOnInit(): void {
@@ -58,6 +57,10 @@ export class DynamicFormComponent implements OnInit {
     public checkRules(group: PanelGroup, data): boolean {
         let enabled = true;
         if (!group.enableWhen) { return; }
+
+        // todo: refactor similar to ngx-publications
+        // todo: merge ngx-forms and ngx-pubs
+
         const enableWhen = group.enableWhen;
 
         if (!enableWhen.rules.length) { return true; }

src/nav/components/form-nav.component.ts

@@ -31,6 +31,7 @@ export class FormNavComponent implements OnDestroy, AfterContentInit {
                 group.panels.forEach(panel => { if (panel.fields) { fields = fields.concat(panel.fields); } });
             }
             group.controls = fields.filter(f => f.required).map(f => this.form.get(f.name));
+
             if (group.controls.length === 0) { group.valid = true; } else {
                 group.controls.forEach((control: AbstractControl) => {
                     this.subscriptions.push(control.statusChanges.subscribe(() => {