refactor(core): Removed the need for control service

Control service needs to be updated every time new formly template is added. Also Instead of keeping angular form control creation logic at central place may not be good idea. it can be responsiblity of formly input directives. This will also help in keeping formly and template separate issue #15 Breaking changed 1. control service is removed. 2. Control groups are only created only once during ngInit
ngx-formly · May 15, 2016 · 09f9778 · 09f9778
1 parent 3c353cf
commit 09f9778
Show file tree

Hide file tree

Showing 19 changed files with 226 additions and 214 deletions.
diff --git a/demo/hello.ts b/demo/hello.ts
@@ -6,13 +6,13 @@ import {FormlyForm} from "./../src/components/formly.form";
 import {ValidationService} from "./validation.service";
 import {FormlyProviders} from "./../src/services/formly.providers";
 import {FormlyMessages} from "./../src/services/formly.messages";
-import { FormlyEventEmitter } from "./../src/services/formly.event.emitter";
+import {FormlyEventEmitter} from "./../src/services/formly.event.emitter";
 import {FormlyConfig} from "./../src/services/formly.config";
 import {TemplateDirectives} from "./../src/templates/templates";
 import {FormlyBootstrap} from "./../src/templates/formlyBootstrap";
-import { Field } from "./../src/templates/field";
+import {Field} from "./../src/templates/field";
 import {FormlyPubSub} from "./../src/services/formly.event.emitter";
-
+import {FormlyFieldConfig} from "./../src/components/formly.config";
 
 // Custom Input Field type 'toggle' Component Definition
 @Component({
@@ -36,34 +36,6 @@ export class FormlyFieldToggle extends Field {
 
 }
 
-
-/*************************************************************
- Interface for FormlyFields and FormlyTemplateOptions
- *************************************************************/
-
-interface FormlyTemplateOptions {
-  type?: string;
-  label?: string;
-  placeholder?: string;
-  disabled?: Boolean;
-  options?: Array<any>;
-  rows?: number;
-  cols?: number;
-  description?: string;
-  focus?: boolean;
-}
-interface FormlyFields {
-  key?: string;
-  className?: string;
-  fieldGroup?: Array<FormlyFields>;
-  type?: string;
-  templateOptions?: FormlyTemplateOptions;
-  validation?: Validators;
-  template?: string;
-  expressionProperties?: Object;
-  hideExpression?: boolean | string | (() => boolean);
-}
-
 @Component({
   directives: [FormlyForm],
   selector: "hello-app",
@@ -255,7 +227,8 @@ export class HelloApp {
         interest: {
           "movies": false,
           "sports": false,
-          "others": true}
+          "others": true
+        }
       };
       this.Stream.emit({
         model: this.user,
@@ -264,7 +237,7 @@ export class HelloApp {
     }, 0);
   }
   user: any = {};
-  private userFields: Array<FormlyFields> = [];
+  private userFields: Array<FormlyFieldConfig> = [];
 
   console(data) {
     console.log(data);

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,65 +1,69 @@
 var gulp = require('gulp');
+var livereload = require('gulp-livereload');
 
 var PATHS = {
-    src: 'src/**/*.ts',
-    demo: 'demo/**/*.ts'
+  src: 'src/**/*.ts',
+  demo: 'demo/**/*.ts'
 };
 
 gulp.task('clean', function (done) {
-    var del = require('del');
-    del(['dist'], done);
+  var del = require('del');
+  del(['dist'], done);
 });
 
 gulp.task('ts2js', function () {
-    var typescript = require('gulp-typescript');
-    var tscConfig = require('./tsconfig.json');
+  var typescript = require('gulp-typescript');
+  var tscConfig = require('./tsconfig.json');
 
-    gulp.src([PATHS.src, 'node_modules/angular2/typings/browser.d.ts', PATHS.demo])
-        .pipe(typescript(tscConfig.compilerOptions))
-        .js.pipe(gulp.dest('src'));
+  gulp.src([PATHS.src, 'node_modules/angular2/typings/browser.d.ts', PATHS.demo])
+    .pipe(typescript(tscConfig.compilerOptions))
+    .js.pipe(gulp.dest('src'))
+    .pipe(livereload());
 });
 
 gulp.task('test', function (done) {
-    var karmaServer = require('karma').Server;
-    new karmaServer({
-        configFile: __dirname + '/karma.conf.js',
-        singleRun: true
-    }, done).start();
+  var karmaServer = require('karma').Server;
+  new karmaServer({
+    configFile: __dirname + '/karma.conf.js',
+    singleRun: true
+  }, done).start();
 });
 
 gulp.task('tdd', function (done) {
-    var karmaServer = require('karma').Server;
-    new karmaServer({
-        configFile: __dirname + '/karma.conf.js'
-    }, done).start();
+  var karmaServer = require('karma').Server;
+  new karmaServer({
+    configFile: __dirname + '/karma.conf.js'
+  }, done).start();
 });
 
 gulp.task("tslint", function() {
-    var tslint = require("gulp-tslint");
+  var tslint = require("gulp-tslint");
 
-    gulp.src(PATHS.src)
-        .pipe(tslint())
-        .pipe(tslint.report("verbose"))
+  gulp.src(PATHS.src)
+    .pipe(tslint())
+    .pipe(tslint.report("verbose"))
 
-    gulp.src(PATHS.demo)
-        .pipe(tslint())
-        .pipe(tslint.report("verbose"))
+  gulp.src(PATHS.demo)
+    .pipe(tslint())
+    .pipe(tslint.report("verbose"))
 });
 
 gulp.task('play', ['ts2js'], function () {
-    var http = require('http');
-    var connect = require('connect');
-    var serveStatic = require('serve-static');
-    var open = require('open');
+  var http = require('http');
+  var connect = require('connect');
+  var serveStatic = require('serve-static');
+  var open = require('open');
 
-    var port = 9000, app;
+  var port = 9000, app;
 
-    gulp.watch(PATHS.src, ['ts2js']);
+  livereload.listen({quiet: true});
 
-    app = connect().use(serveStatic(__dirname));
-    http.createServer(app).listen(port, function () {
-        open('http://localhost:' + port + '/demo');
-    });
+  gulp.watch(PATHS.src, ['ts2js']);
+
+  app = connect().use(serveStatic(__dirname));
+  http.createServer(app).listen(port, function () {
+    open('http://localhost:' + port + '/demo');
+  });
 });
 
 gulp.task('default', ['play']);
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "del": "^2.2.0",
     "del-cli": "^0.2.0",
     "gulp": "^3.9.0",
+    "gulp-livereload": "^3.8.1",
     "gulp-tslint": "^4.3.5",
     "gulp-typescript": "^2.8.0",
     "jasmine": "^2.4.1",

diff --git a/src/components/field.base.ts b/src/components/field.base.ts
diff --git a/src/components/formly.config.ts b/src/components/formly.config.ts
@@ -0,0 +1,25 @@
+
+export interface FormlyFieldConfig {
+  key?: string;
+  templateOptions?: FormlyTemplateOptions;
+  validation?: any;
+  template?: string;
+  fieldGroup?: Array<FormlyFieldConfig>;
+  hideExpression?: boolean | string | (() => boolean);
+  className?: string;
+  type?: string;
+  expressionProperties?: any;
+  focus?: boolean;
+}
+
+export interface FormlyTemplateOptions {
+  type?: string;
+  label?: string;
+  placeholder?: string;
+  disabled?: Boolean;
+  options?: Array<any>;
+  rows?: number;
+  cols?: number;
+  description?: string;
+  focus?: boolean;
+}
diff --git a/src/components/formly.field.ts b/src/components/formly.field.ts
@@ -1,11 +1,14 @@
 import {
   Component, OnInit, Input, Output, EventEmitter, DynamicComponentLoader, ElementRef,
-  ViewContainerRef, ViewChild, DoCheck, Directive
+  ViewContainerRef, ViewChild, DoCheck, Directive, ComponentFactory, ComponentResolver
 } from "@angular/core";
 import {FormlyCommon} from "./formly.common.component";
 import {FormlyConfig} from "../services/formly.config";
 import {FormlyEventEmitter, FormlyPubSub} from "../services/formly.event.emitter";
 import {FormlyFieldVisibilityDelegate} from "../services/formly.field.visibility";
+import {Field} from "../templates/field";
+import {FormlyConfigProcessor} from "../services/formly.processor";
+import {FormlyFieldConfig} from "./formly.config";
 
 @Directive({
   selector: "[child-host]"
@@ -20,18 +23,21 @@ export class DivComponent {
         <div child-host #child></div>
         <div *ngIf="field.template" [innerHtml]="field.template"></div>
          <div class="formly-field"
-            *ngFor="let f of field.fieldGroup">
-            <formly-field [hide]="f.hideExpression" [model]="model" [key]="f.key" [form]="form" [field]="f" (changeFn)="changeFunction($event, f)" [ngClass]="f.className" [eventEmitter]="eventEmitter"></formly-field>
+            *ngFor="let field of field.fieldGroup">
+            <formly-field [hide]="field.hideExpression" [model]="model" [key]="field.key" [form]="form" [field]="field"
+              (changeFn)="changeFunction($event, field)" [ngClass]="field.className" [eventEmitter]="eventEmitter">
+            </formly-field>
         </div> 
     `,
   directives: [FormlyField, DivComponent]
 })
-export class FormlyField extends FormlyCommon implements DoCheck {
+export class FormlyField extends FormlyCommon implements DoCheck, OnInit {
+
   // Inputs and Outputs
   @Input() model;
   @Input() key;
   @Input() form;
-  @Input() field;
+  @Input() field: FormlyFieldConfig;
   @Input() eventEmitter;
 
   // Outputs
@@ -45,33 +51,42 @@ export class FormlyField extends FormlyCommon implements DoCheck {
 
   @ViewChild(DivComponent) myChild: DivComponent;
 
-  constructor(protected dcl: DynamicComponentLoader, protected elem: ElementRef, fc: FormlyConfig, protected ps: FormlyPubSub) {
+  constructor(protected elem: ElementRef, fc: FormlyConfig, protected ps: FormlyPubSub, protected cr: ComponentResolver) {
     super();
     this.directives = fc.getDirectives();
     this.visibilityDelegate = new FormlyFieldVisibilityDelegate(this);
   }
 
-  ngAfterViewInit() {
+  ngOnInit(): any {
+    this.createChilds();
+  }
+
+  ngAfterViewInit() {}
+
+  createChilds() {
     // TODO support this.formlyField.field.hideExpression as a callback/observable
     this.hide = this.field.hideExpression ? true : false;
-
     if (!this.field.template && !this.field.fieldGroup) {
       this.update = new FormlyEventEmitter();
       this.ps.setEmitter(this.key, this.update);
-      this.dcl.loadNextToLocation(this.directives[this.field.type], this.myChild.viewContainer)
-        .then(ref => {
+      this.cr.resolveComponent(this.directives[this.field.type])
+        .then((cf: ComponentFactory<any>) => {
+          let ref = this.myChild.viewContainer.createComponent(cf);
           ref.instance.model = this.model[this.field.key];
           ref.instance.type = this.field.type;
-          ref.instance.options = this.field.templateOptions;
+          ref.instance.templateOptions = this.field.templateOptions;
           ref.instance.changeFn.subscribe((value) => {
             this.changeFn.emit(value);
           });
           ref.instance.key = this.key;
           ref.instance.form = this.form;
           ref.instance.update = this.update;
-        });
+          ref.instance.field = this.field;
+          this.form.addControl(this.key, ref.instance.formControl);
+        }).then();
     }
   }
+
   isHidden() {
     return this.hide;
   }