Merge remote-tracking branch 'makinacorpus/master' into arrayBugFix

Author: felixbaral

CHANGELOG.md

@@ -1,3 +1,26 @@
+# 1.0.0-beta.8 (unreleased)
+
+## Bug Fixes
+
+- Restore has-success/has-error class
+
+# 1.0.0-beta.7 (2017-04-24)
+
+## New features
+
+- Upgrade to Angular 4
+
+## Bug Fixes
+
+- Clean up existing elements on schema changes
+- Fix AOT build
+
+# 1.0.0-beta.6 (2017-04-21)
+
+## Bug Fixes
+
+- Re-render form on schema change [ZheyangSong]
+
 # 1.0.0-beta.5 (2017-03-18)
 
 ## Bug Fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-schema-form",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "Angular2 Schema Form (DISCLAIMER: it is not related to angular-schema-form)",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -42,20 +42,20 @@
     "z-schema": "^3.17.0"
   },
   "peerDependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
+    "@angular/common": "^4.0.3",
+    "@angular/forms": "^4.0.3",
+    "@angular/compiler": "^4.0.3",
+    "@angular/core": "^4.0.3",
+    "@angular/http": "^4.0.3",
+    "@angular/platform-browser": "^4.0.3",
     "core-js": "2.4.1",
     "rxjs": "^5.1.0",
-    "typescript": "2.0.10",
+    "typescript": "2.2.2",
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^2.4.0",
-    "@angular/platform-server": "^2.4.0",
+    "@angular/compiler-cli": "^4.0.3",
+    "@angular/platform-server": "^4.0.3",
     "@types/jasmine": "2.5.38",
     "@types/node": "6.0.60",
     "npm-install-peers": "^1.1.0",

src/default.widget.ts

@@ -2,8 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'sf-default-field',
-  template: `
-    <p>Cannot find valid type for {{name}}
-  `
+  template: `<p>Unknow type</p>`
 })
 export class DefaultWidget {}

src/form.component.ts

@@ -19,15 +19,16 @@ import {
 
 import { SchemaValidatorFactory, ZSchemaValidatorFactory } from './schemavalidatorfactory';
 import { WidgetFactory } from './widgetfactory';
+import { TerminatorService } from './terminator.service';
 
 export function useFactory(schemaValidatorFactory, validatorRegistry) {
   return new FormPropertyFactory(schemaValidatorFactory, validatorRegistry);
 };
 
 @Component({
   selector: 'sf-form',
-  template: `<sf-form-element
-  *ngIf="rootProperty" [formProperty]="rootProperty"></sf-form-element>`,
+  template: `<form><sf-form-element
+  *ngIf="rootProperty" [formProperty]="rootProperty"></sf-form-element></form>`,
   providers: [
     ActionRegistry,
     ValidatorRegistry,
@@ -40,7 +41,8 @@ export function useFactory(schemaValidatorFactory, validatorRegistry) {
       provide: FormPropertyFactory,
       useFactory: useFactory,
       deps: [SchemaValidatorFactory, ValidatorRegistry]
-    }
+    },
+    TerminatorService,
   ]
 })
 export class FormComponent implements OnChanges {
@@ -61,11 +63,11 @@ export class FormComponent implements OnChanges {
     private formPropertyFactory: FormPropertyFactory,
     private actionRegistry: ActionRegistry,
     private validatorRegistry: ValidatorRegistry,
-    private cdr: ChangeDetectorRef
+    private cdr: ChangeDetectorRef,
+    private terminator: TerminatorService,
   ) { }
 
   ngOnChanges(changes: any) {
-    console.log(changes);
     if (changes.validators) {
       this.setValidators();
     }
@@ -74,12 +76,14 @@ export class FormComponent implements OnChanges {
       this.setActions();
     }
 
-    if (!this.schema.type) {
+    if (this.schema && !this.schema.type) {
       this.schema.type = 'object';
     }
 
     if (this.schema && changes.schema) {
-      console.log(this.schema, changes.schema);
+      if (!changes.schema.firstChange) {
+        this.terminator.destroy();
+      }
       SchemaPreprocessor.preprocess(this.schema);
       this.rootProperty = this.formPropertyFactory.createProperty(this.schema);
       this.rootProperty.valueChanges.subscribe(value => { this.onChange.emit({value: value}); });

src/formelement.component.ts

@@ -17,7 +17,9 @@ import {
 
 @Component({
   selector: 'sf-form-element',
-  template: `<div *ngIf="formProperty.visible">
+  template: `<div *ngIf="formProperty.visible"
+    [class.has-error]="!control.valid"
+	  [class.has-success]="control.valid">
 	<sf-widget-chooser
 	(widgetInstanciated)="onWidgetInstanciated($event)"
 	[widgetInfo]="formProperty.schema.widget">
@@ -32,9 +34,9 @@ export class FormElementComponent implements OnInit {
   @Input() formProperty: FormProperty;
   control: FormControl = new FormControl('', () => null);
 
-  private widget: Widget<any> = null;
+  widget: Widget<any> = null;
 
-  private buttons = [];
+  buttons = [];
 
 
   constructor(private actionRegistry: ActionRegistry) {}

src/index.ts

@@ -3,6 +3,7 @@ export { FormElementComponent } from './formelement.component';
 export { WidgetChooserComponent } from './widgetchooser.component';
 export { WidgetRegistry } from './widgetregistry';
 export { Validator } from './model/validator';
+export { TerminatorService } from './terminator.service';
 
 export {
     Widget,

src/terminator.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Rx';
+
+@Injectable()
+export class TerminatorService {
+  public onDestroy: Subject<boolean>;
+
+  constructor() {
+    this.onDestroy = new Subject();
+  }
+
+  destroy() {
+    this.onDestroy.next(true);
+  }
+}

src/widgetchooser.component.spec.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
 
+import { TerminatorService } from './terminator.service';
 import { WidgetFactory } from './widgetfactory';
 import { WidgetRegistry } from './widgetregistry';
 
@@ -14,7 +15,8 @@ describe('WidgetChooserComponent', () => {
       providers: [
         WidgetFactory,
         WidgetRegistry,
-        ChangeDetectorRef
+        ChangeDetectorRef,
+        TerminatorService,
       ]
     });
   });

src/widgetchooser.component.ts

@@ -1,21 +1,22 @@
 import {
   Component,
+  ComponentRef,
   ChangeDetectorRef,
   EventEmitter,
   Input,
-  OnInit,
+  OnChanges,
   Output,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-
+import { TerminatorService } from './terminator.service';
 import { WidgetFactory } from './widgetfactory';
 
 @Component({
   selector: 'sf-widget-chooser',
   template: `<div #target></div>`,
 })
-export class WidgetChooserComponent implements OnInit {
+export class WidgetChooserComponent implements OnChanges {
 
   @Input() widgetInfo: any;
 
@@ -24,14 +25,26 @@ export class WidgetChooserComponent implements OnInit {
   @ViewChild('target', {read: ViewContainerRef}) container: ViewContainerRef;
 
   private widgetInstance: any;
+  private ref: ComponentRef<any>;
 
-
-  constructor(private widgetFactory: WidgetFactory = null, private cdr: ChangeDetectorRef) {}
+  constructor(
+    private widgetFactory: WidgetFactory = null,
+    private cdr: ChangeDetectorRef,
+    private terminator: TerminatorService,
+  ) { }
 
   ngOnInit() {
-    let ref = this.widgetFactory.createWidget(this.container, this.widgetInfo.id);
-    this.widgetInstanciated.emit(ref.instance);
-    this.widgetInstance = ref.instance;
+    this.terminator.onDestroy.subscribe(destroy => {
+      if (destroy) {
+        this.ref.destroy();
+      }
+    })
+  }
+
+  ngOnChanges() {
+    this.ref = this.widgetFactory.createWidget(this.container, this.widgetInfo.id);
+    this.widgetInstanciated.emit(this.ref.instance);
+    this.widgetInstance = this.ref.instance;
     this.cdr.detectChanges();
   }
 }

tests/package.json

@@ -13,14 +13,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^2.4.0",
-    "@angular/compiler": "^2.4.0",
-    "@angular/core": "^2.4.0",
-    "@angular/forms": "^2.4.0",
-    "@angular/http": "^2.4.0",
-    "@angular/platform-browser": "^2.4.0",
-    "@angular/platform-browser-dynamic": "^2.4.0",
-    "@angular/router": "^3.4.0",
+    "@angular/common": "^4.0.3",
+    "@angular/compiler": "^4.0.3",
+    "@angular/core": "^4.0.3",
+    "@angular/forms": "^4.0.3",
+    "@angular/http": "^4.0.3",
+    "@angular/platform-browser": "^4.0.3",
+    "@angular/platform-browser-dynamic": "^4.0.3",
+    "@angular/router": "^4.0.3",
     "body-parser": "^1.17.1",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
@@ -31,8 +31,8 @@
     "zone.js": "^0.7.6"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0-rc.1",
-    "@angular/compiler-cli": "^2.4.0",
+    "@angular/cli": "^1.0.0",
+    "@angular/compiler-cli": "^4.0.3",
     "@types/jasmine": "2.5.38",
     "@types/node": "~6.0.60",
     "codelyzer": "~2.0.0",
@@ -41,12 +41,12 @@
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^0.2.0",
     "protractor": "~5.1.0",
     "ts-node": "~2.0.0",
     "tslint": "~4.4.2",
-    "typescript": "~2.0.0"
+    "typescript": "^2.2.2"
   }
 }