Merge branch 'master' into greenkeeper/tslint-angular-3.0.0

CHANGELOG.md

@@ -1,3 +1,22 @@
+## [7.0.1](https://github.com/LabShare/ngx-forms/compare/v7.0.0...v7.0.1) (2019-06-13)
+
+
+### Bug Fixes
+
+* **package:** update ngx-chips to version 2.0.1 ([60f1fa0](https://github.com/LabShare/ngx-forms/commit/60f1fa0))
+
+# [7.0.0](https://github.com/LabShare/ngx-forms/compare/v6.0.0...v7.0.0) (2019-06-10)
+
+
+### Bug Fixes
+
+* readme ([d6830ff](https://github.com/LabShare/ngx-forms/commit/d6830ff))
+
+
+### BREAKING CHANGES
+
+* major update under the hood
+
 ## [5.6.2](https://github.com/LabShare/ngx-forms/compare/v5.6.1...v5.6.2) (2019-05-01)
 
 

README.md

@@ -4,25 +4,37 @@
 
 # ngx-forms
 
-Dynamic form generator. This module provides components that wrap angular 2+ FormBuilder styled with Bootstrap CSS 4
-![Alt text](/imgs/readmess.png?raw=true "Optional Title")
+Dynamic form generator, creates Angular Reactive forms from json schema
 
-## Requirements
--   angular 2+
+![Alt text](/imgs/readmess.png?raw=true "Optional Title")
 
 ## Installation
-`npm install`
-
-## Linking
-`npm run build:watch`
+`npm i --save @labshare/ngx-forms`
 
 ## Usage
 Add html tag with bindings
-`<dynamic-form [config]="config" #form="dynamicForm" [model]="project"></dynamic-form>`
+```
+<dynamic-form [formConfig]="config" #form="dynamicForm" [model]="data"></dynamic-form>
+```
+
 - `config` - json array that contains fields definitions
 - `#form="dynamicForm"` - bind to `dynamicForm` object that has form output
 - `model` - preload data. One way binding only
 
+Add reference in the component controller 
+```
+export class MyFormComponent {
+    @ViewChild('form') public formReference: DynamicFormDirective;
+
+    public const config = [ 
+        { type: 'text', label: 'Title', name: 'title' } 
+    ];
+ 
+    public const model = { title: "Example" }
+    
+}
+```
+
 ## Config example
 ```javascript
 [
@@ -62,3 +74,9 @@ Name | Type | Description | Example
 - `radio` - radio buttons
 - `checkbox` - checkbox buttons
 - `date` - datepicker
+
+## Linking for Development
+```
+npm run link
+npm run build:watch
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@labshare/ngx-forms",
-  "version": "5.6.2",
+  "version": "7.0.1",
   "main": "dist/ngx-forms",
   "typings": "index.d.ts",
   "scripts": {
@@ -28,7 +28,7 @@
     "bootstrap": "^4.3.1",
     "core-js": "^2.4.1",
     "fork-ts-checker-webpack-plugin": "^1.0.0",
-    "ngx-chips": "^1.9.1",
+    "ngx-chips": "^2.0.1",
     "ngx-quill": "^5.0.0",
     "quill": "^1.3.6",
     "reflect-metadata": "^0.1.12",
@@ -38,13 +38,14 @@
   },
   "devDependencies": {
     "@angular/compiler-cli": "^6.0.4",
-    "@commitlint/cli": "^7.0.0",
-    "@commitlint/config-conventional": "^7.0.1",
+    "@commitlint/cli": "^8.0.0",
+    "@commitlint/config-conventional": "^8.0.0",
     "@labshare/semantic-release-config": "^1.0.0",
     "@ngtools/webpack": "^1.3.3",
     "@types/jasmine": "^3.0.0",
-    "@types/node": "^11.9.0",
-    "css-loader": "^2.1.0",
+    "@types/node": "^12.0.0",
+    "codelyzer": "^5.1.0",
+    "css-loader": "^3.0.0",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "husky": "^2.0.0",
@@ -66,8 +67,9 @@
     "style-loader": "^0.22.0",
     "ts-loader": "^4.3.0",
     "tslint-angular": "^3.0.0",
+    "tslint": "^5.17.0",
     "typescript": "^3.2.2",
-    "url-loader": "1.1.1",
+    "url-loader": "2.0.0",
     "webpack": "^4.10.2",
     "webpack-cli": "^3.1.2",
     "webpack-node-externals": "^1.7.2"

src/app/app.module.ts

@@ -3,33 +3,39 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { DynamicFormDirective } from './dynamic-form/dynamic-form.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FIELD_DICT_TOKEN, LAYOUTS_TOKEN, FormsExtensions } from '../types';
+import { FIELD_DICT_TOKEN, LAYOUTS_TOKEN, FormsExtensions, LayoutDictionary } from '../types';
 import { Fields, FieldComponents, CustomInputs } from './fields';
-import { FormLayoutsModule, defaultLayouts } from './layouts/layouts.module';
-import { DynamicFieldModule } from './dynamic-field/dynamic-field.module';
 import { QuillModule } from 'ngx-quill';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BasicLayoutComponent } from './layouts/basic/basic-layout.component';
+import { DynamicFieldDirective } from './dynamic-field/dynamic-field.directive';
+
+const defaultLayouts: LayoutDictionary = {
+    basic: BasicLayoutComponent
+};
 
 @NgModule({
     imports: [
         CommonModule,
         BrowserAnimationsModule,
         ReactiveFormsModule,
         FormsModule,
-        FormLayoutsModule,
-        DynamicFieldModule,
         QuillModule,
         NgbModule
     ],
     declarations: [
         DynamicFormDirective,
         FieldComponents,
-        CustomInputs
+        CustomInputs,
+        BasicLayoutComponent,
+        DynamicFieldDirective
     ],
     entryComponents: [
-        FieldComponents
+        FieldComponents,
+        BasicLayoutComponent
     ],
     exports: [
+        DynamicFieldDirective,
         DynamicFormDirective,
     ],
     providers: [
@@ -68,3 +74,4 @@ export class NgxFormModule {
 }
 
 // todo: be able to export full form with buttons, or just form as object editor
+// todo: refactor file structure, add themes and layouts

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

@@ -92,6 +92,12 @@ describe('DynamicFieldDirective', () => {
 
         let cfg = { name: 'test', type: 'text', disabled: true, required: true, minLength: 5, maxLength: 10, email: true, min: 1, max: 10, pattern: new RegExp('\d'), nullValidator: true, value: 5 };
 
+        it('should test', () => {
+            dir.model = { "publicationTitle": "123"}
+            dir.ngOnInit();
+            expect(dir.group.value['publicationTitle']).toEqual("123");
+        });
+
         it('shoulld test constructor', () => {
             DynamicFieldDirective.constructor();
             expect(dir).toBeTruthy();

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

@@ -24,12 +24,11 @@ export class FormInputComponent implements Field {
 const defaultInputs: FieldDictionary = { text: FormInputComponent }
 const layouts = { test: LayoutComponent }
 
-@Component({ template: `<dynamic-form [formConfig]="formConfig" #form="dynamicForm" [model]="data" [lookups]="lookups"></dynamic-form>` })
+@Component({ template: `<dynamic-form [formConfig]="formConfig" #form="dynamicForm" [model]="data" ></dynamic-form>` })
 class TestComponent {
     formConfig
     data: {};
     dynamicForm: {};
-    lookups: {};
     model: any
 }
 

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

@@ -9,7 +9,6 @@ import { FormConfig, LayoutDictionary, LAYOUTS_TOKEN, Layout } from '../../types
 export class DynamicFormDirective implements OnInit, AfterViewInit {
     @Input() formConfig: FormConfig;
     @Input() model: any;
-    @Input() lookups: any;
     @Input() readOnly: boolean;
 
     public group: FormGroup;
@@ -34,7 +33,6 @@ export class DynamicFormDirective implements OnInit, AfterViewInit {
         component.instance.group = this.group;
         component.instance.formConfig = this.formConfig;
         component.instance.model = this.model;
-        component.instance.lookups = this.lookups;
     }
 
     ngAfterViewInit() {

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { BaseFieldComponent } from '../base-field';
 import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
-import { DatePickerAdapter } from '../../adapters/date-picker.adapter';
+import { DatePickerAdapter } from './data-adapter/date-picker.adapter';
 
 @Component({
     selector: 'form-date',

src/app/fields/form-multicheckbox/multicheckbox-control/multicheckbox-control.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, OnDestroy } from '@angular/core';
-import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator, FormControl, FormGroup, FormArray, Validators } from '@angular/forms';
+import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator, FormControl, FormGroup, FormArray } from '@angular/forms';
 import { Subscription } from 'rxjs';
 
 @Component({

src/app/layouts/base-layout.ts

@@ -5,6 +5,5 @@ import { FormConfig, Layout } from '../../types';
 export class BaseLayout implements Layout {
     @Input() formConfig: FormConfig;
     @Input() model: any;
-    @Input() lookups: object;
     @Input() group: FormGroup;
 }

src/app/layouts/basic/basic-layout.component.spec.ts

@@ -21,13 +21,12 @@ const defaultInputs: FieldDictionary = {
 }
 
 @Component({
-    template: `<dynamic-form [formConfig]="formConfig" #form="dynamicForm" [model]="data" [lookups]="lookups"></dynamic-form>`
+    template: `<dynamic-form [formConfig]="formConfig" #form="dynamicForm" [model]="data"></dynamic-form>`
 })
 class TestComponent {
     formConfig
     data: {};
     dynamicForm: {};
-    lookups: {};
 }
 
 @NgModule({