Fixes problem adding recursive $ref items.

Author: dschnelldavis

.npmignore

@@ -4,27 +4,23 @@ docs
 dist/playground
 src/playground
 
-# TypeScript
-tsconfig.json
+# Config
+.editorconfig
+.gitignore
 tslint.json
 typedoc.json
-typings.json
-*.ts
-!*.d.ts
 
 # Node
 node_modules
 npm-debug.log
 
-# IDE
+# IDE & OS
 .idea
 .project
 .settings
 .idea/*
 *.iml
 *.swp
-
-# OS
 Thumbs.db
 Desktop.ini
 .DS_Store

README.md

@@ -341,7 +341,7 @@ The two built-in frameworks (both in the `/src/frameworks` folder) demonstrate d
 
 If you find this library useful, I'd love to hear from you. If you have any trouble with it or would like to request a feature, please [post an issue on GitHub](https://github.com/dschnelldavis/angular2-json-schema-form/issues). If you've made any improvements, please [make a pull request](https://github.com/dschnelldavis/angular2-json-schema-form/pulls), so I can share your improvements with everyone else who uses this library.
 
-I wrote this library because I needed a JSON Schema Form builder to use in a large Angular 2 project I am currently working on. Though I found excellent libraries for Angular 1, React, and jQuery (all linked above), I could not find anything similar for Angular 2—so I wrote this library to fill that gap. The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like `oneOf`, `allOf`, and `$ref` links (including circular links). However, it still has many small bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is fragile because it does not yet include any testing framework. Hopefully all these issues will get fixed eventually, but as I'm just a single busy programmer, I can't guarantee how long it will take. In the meantime, I hope you find it useful, and if you do, please send me your feedback.
+I wrote this library because I needed a JSON Schema Form builder to use in a large Angular 2 project I am currently working on. Though I found excellent libraries for Angular 1, React, and jQuery (all linked above), I could not find anything similar for Angular 2—so I wrote this library to fill that gap. The current version is mostly functional, and even includes a few enhancements not available in some other libraries, such as supporting less common JSON Schema features like `oneOf`, `allOf`, and `$ref` links (including recursive links). However, it still has many small bugs, such as not dynamically enabling and disabling conditionally required fields inside objects, and is fragile because it does not yet include any testing framework. Hopefully all these issues will get fixed eventually, but as I'm just a single busy programmer, I can't guarantee how long it will take. In the meantime, I hope you find it useful, and if you do, please send me your feedback.
 
 Thanks! I hope you enjoy using this library as much as I enjoyed writing it. :-)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular2-json-schema-form",
-  "version": "0.3.0-alpha.19",
+  "version": "0.3.0-alpha.20",
   "author": {
     "name": "dschnelldavis",
     "email": "[email protected]"
@@ -59,9 +59,9 @@
     "@angular/platform-server": "^2.4.1",
     "@angular/router": "^3.4.1",
     "@types/ace": "^0.0.32",
-    "@types/jasmine": "^2.5.38",
-    "@types/lodash": "^4.14.42",
-    "@types/node": "^6.0.53",
+    "@types/jasmine": "^2.5.40",
+    "@types/lodash": "^4.14.45",
+    "@types/node": "^6.0.55",
     "brace": "^0.9.1",
     "buffer": "^5.0.0",
     "canonical-path": "^0.0.2",
@@ -78,14 +78,14 @@
     "karma-jasmine": "^1.0.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "lite-server": "^2.2.2",
-    "onchange": "^3.2.0",
+    "onchange": "^3.2.1",
     "protractor": "^4.0.13",
     "reflect-metadata": "^0.1.8",
     "rimraf": "^2.5.4",
     "rxjs": "^5.0.2",
     "systemjs": "^0.19.41",
     "tslint": "^4.2.0",
-    "typedoc": "^0.5.1",
+    "typedoc": "^0.5.3",
     "typescript": "^2.1.4",
     "typings": "^2.1.0",
     "zone.js": "^0.7.2"

src/frameworks/material-design/material-add-reference.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { Component, DoCheck, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 import { JsonSchemaFormService } from '../../library/json-schema-form.service';
@@ -17,10 +17,12 @@ import { JsonSchemaFormService } from '../../library/json-schema-form.service';
       </button>
     </section>`,
 })
-export class MaterialAddReferenceComponent implements OnInit, OnChanges {
+export class MaterialAddReferenceComponent implements OnInit, DoCheck {
   private options: any;
   private itemCount: number;
   private showAddButton: boolean = true;
+  private previousLayoutIndex: number[];
+  private previousDataIndex: number[];
   @Input() formID: number;
   @Input() layoutNode: any;
   @Input() layoutIndex: number[];
@@ -32,12 +34,15 @@ export class MaterialAddReferenceComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.options = this.layoutNode.options;
-    this.itemCount = this.layoutIndex[this.layoutIndex.length - 1];
     this.updateControl();
   }
 
-  ngOnChanges() {
-    this.updateControl();
+  ngDoCheck() {
+    if (this.previousLayoutIndex !== this.layoutIndex ||
+      this.previousDataIndex !== this.dataIndex
+    ) {
+      this.updateControl();
+    }
   }
 
   private addItem(event) {
@@ -48,8 +53,11 @@ export class MaterialAddReferenceComponent implements OnInit, OnChanges {
   }
 
   private updateControl() {
+    this.itemCount = this.layoutIndex[this.layoutIndex.length - 1];
+    this.previousLayoutIndex = this.layoutIndex;
+    this.previousDataIndex = this.dataIndex;
     this.showAddButton = this.layoutNode.arrayItem &&
-      this.itemCount <= (this.options.maxItems || 1000000);
+      this.itemCount < (this.options.maxItems || 1000000);
   }
 
   private setTitle(): string {

src/frameworks/material-design/material-button.component.ts

@@ -22,6 +22,7 @@ import { JsonSchemaFormService } from '../../library/json-schema-form.service';
         <span *ngIf="options?.title" [innerHTML]="options?.title"></span>
       </button>
     </section>`,
+    styles: [`button { margin-top: 4px; }`],
 })
 export class MaterialButtonComponent implements OnInit {
   private formControl: AbstractControl;

src/frameworks/material-design/material-input.component.ts

@@ -6,32 +6,35 @@ import { JsonSchemaFormService } from '../../library/json-schema-form.service';
 @Component({
   selector: 'material-input-widget',
   template: `
-    <md-input #inputControl
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
-      [attr.maxlength]="options?.maxLength"
-      [attr.minlength]="options?.minLength"
-      [attr.pattern]="options?.pattern"
-      [attr.required]="options?.required"
-      [class]="options?.fieldHtmlClass"
-      [disabled]="controlDisabled"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      [placeholder]="options?.title"
-      [readonly]="options?.readonly ? 'readonly' : null"
-      [style.width]="'100%'"
-      [type]="layoutNode?.type"
-      [value]="controlValue"
-      (input)="updateValue($event)">
-      <span *ngIf="options?.fieldAddonLeft"
-        md-prefix>{{options?.fieldAddonLeft}}</span>
-      <span *ngIf="options?.fieldAddonRight"
-        md-suffix>{{options?.fieldAddonRight}}</span>
-      <md-hint *ngIf="options?.description && !(options?.placeholder && !formControl?.dirty)"
-        align="end">{{options?.description}}</md-hint>
-      <md-hint *ngIf="!options?.description && options?.placeholder && !formControl?.dirty"
-        align="end">{{options?.placeholder}}</md-hint>
-    </md-input>`,
+    <section [class]="options?.htmlClass">
+      <md-input #inputControl
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.list]="'control' + layoutNode?._id + 'Autocomplete'"
+        [attr.maxlength]="options?.maxLength"
+        [attr.minlength]="options?.minLength"
+        [attr.pattern]="options?.pattern"
+        [required]="options?.required"
+        [class]="options?.fieldHtmlClass"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        [type]="layoutNode?.type"
+        [value]="controlValue"
+        (input)="updateValue($event)">
+        <span *ngIf="options?.fieldAddonLeft"
+          md-prefix>{{options?.fieldAddonLeft}}</span>
+        <span *ngIf="options?.fieldAddonRight"
+          md-suffix>{{options?.fieldAddonRight}}</span>
+        <md-hint *ngIf="options?.description && !(options?.placeholder && !formControl?.dirty)"
+          align="end">{{options?.description}}</md-hint>
+        <md-hint *ngIf="!options?.description && options?.placeholder && !formControl?.dirty"
+          align="end">{{options?.placeholder}}</md-hint>
+      </md-input>
+    </section>`,
+    styles: [`md-input { margin-top: 6px; }`],
 })
 export class MaterialInputComponent implements OnInit {
   private formControl: AbstractControl;

src/frameworks/material-design/material-number.component.ts

@@ -7,37 +7,40 @@ import { getControl, inArray, isDefined } from '../../library/utilities/index';
 @Component({
   selector: 'material-number-widget',
   template: `
-    <md-input #inputControl
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [attr.max]="options?.maximum"
-      [attr.min]="options?.minimum"
-      [attr.placeholder]="options?.placeholder"
-      [attr.required]="options?.required"
-      [attr.readonly]="options?.readonly ? 'readonly' : null"
-      [attr.step]="options?.multipleOf || options?.step || 'any'"
-      [class]="options?.fieldHtmlClass"
-      [disabled]="controlDisabled"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      [placeholder]="options?.title"
-      [readonly]="options?.readonly ? 'readonly' : null"
-      [style.width]="'100%'"
-      [title]="lastValidNumber"
-      [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
-      [value]="controlValue"
-      (input)="updateValue($event)"
-      (keydown)="validateInput($event)"
-      (keyup)="validateNumber($event)">
-      <span *ngIf="options?.fieldAddonLeft"
-        md-prefix>{{options?.fieldAddonLeft}}</span>
-      <span *ngIf="options?.fieldAddonRight"
-        md-suffix>{{options?.fieldAddonRight}}</span>
-      <md-hint *ngIf="options?.description && !(options?.placeholder && !formControl?.dirty)"
-        align="end">{{options?.description}}</md-hint>
-      <md-hint *ngIf="!options?.description && options?.placeholder && !formControl?.dirty"
-        align="end">{{options?.placeholder}}</md-hint>
-    </md-input>
-    {{layoutNode?.type === 'range' ? controlValue : ''}}`,
+    <section [class]="options?.htmlClass">
+      <md-input #inputControl
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.max]="options?.maximum"
+        [attr.min]="options?.minimum"
+        [attr.placeholder]="options?.placeholder"
+        [required]="options?.required"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [attr.step]="options?.multipleOf || options?.step || 'any'"
+        [class]="options?.fieldHtmlClass"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [name]="controlName"
+        [placeholder]="options?.title"
+        [readonly]="options?.readonly ? 'readonly' : null"
+        [style.width]="'100%'"
+        [title]="lastValidNumber"
+        [type]="layoutNode?.type === 'range' ? 'range' : 'number'"
+        [value]="controlValue"
+        (input)="updateValue($event)"
+        (keydown)="validateInput($event)"
+        (keyup)="validateNumber($event)">
+        <span *ngIf="options?.fieldAddonLeft"
+          md-prefix>{{options?.fieldAddonLeft}}</span>
+        <span *ngIf="options?.fieldAddonRight"
+          md-suffix>{{options?.fieldAddonRight}}</span>
+        <md-hint *ngIf="options?.description && !(options?.placeholder && !formControl?.dirty)"
+          align="end">{{options?.description}}</md-hint>
+        <md-hint *ngIf="!options?.description && options?.placeholder && !formControl?.dirty"
+          align="end">{{options?.placeholder}}</md-hint>
+      </md-input>
+      {{layoutNode?.type === 'range' ? controlValue : ''}}
+    </section>`,
+    styles: [`md-input { margin-top: 6px; }`],
 })
 export class MaterialNumberComponent implements OnInit {
   private formControl: AbstractControl;

src/frameworks/material-design/material-select.component.ts

@@ -7,24 +7,24 @@ import { buildTitleMap } from '../../library/utilities/index';
 @Component({
   selector: 'material-select-widget',
   template: `
-    <label *ngIf="options?.title"
-      [attr.for]="'control' + layoutNode?._id"
-      [class]="options?.labelHtmlClass"
-      [class.sr-only]="options?.notitle"
-      [innerHTML]="options?.title"></label>
-    <select
-      [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
-      [attr.readonly]="options?.readonly ? 'readonly' : null"
-      [attr.required]="options?.required"
-      [class]="options?.fieldHtmlClass"
-      [disabled]="controlDisabled"
-      [id]="'control' + layoutNode?._id"
-      [name]="controlName"
-      (input)="updateValue($event)">
-      <option *ngFor="let selectItem of selectList"
-        [value]="selectItem.value"
-        [selected]="selectItem.value === controlValue">{{selectItem.name}}</option>
-    </select>`,
+    <section [class]="options?.htmlClass">
+      <md-select #inputControl
+        [(ngModel)]="controlValue"
+        [attr.aria-describedby]="'control' + layoutNode?._id + 'Status'"
+        [attr.name]="controlName"
+        [attr.readonly]="options?.readonly ? 'readonly' : null"
+        [class]="options?.fieldHtmlClass"
+        [disabled]="controlDisabled"
+        [id]="'control' + layoutNode?._id"
+        [placeholder]="options?.title"
+        [required]="options?.required"
+        (onClose)="updateValue($event)">
+        <md-option *ngFor="let selectItem of selectList"
+          [value]="selectItem.value"
+          [attr.selected]="selectItem.value === controlValue">{{selectItem.name}}</md-option>
+      </md-select>
+    </section>`,
+    styles: [`md-select { margin-top: 18px; }`]
 })
 export class MaterialSelectComponent implements OnInit {
   private formControl: AbstractControl;
@@ -54,6 +54,6 @@ export class MaterialSelectComponent implements OnInit {
   }
 
   private updateValue(event) {
-    this.jsf.updateValue(this, event.target.value);
+    this.jsf.updateValue(this, this.controlValue);
   }
 }