guillotinaweb / ngx-schema-form Goto Github PK

I followed the installation guide but its giving me a bunch of error therefore the project won't run. I did try installing the plugin again see if that works but clearly it didn't.

Any solution to this?

`ERROR in ./src/main.browser.ts
Module build failed: Error: Cannot resolve module 'angular2-schema-form' in C:\Users\mestrada\Desktop\schema-J SON\angular2-schema-form-demo-master\src
Required in C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\src\main.browser.ts
at ResolutionError.Error (native)
at new ResolutionError (C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\node_module s\awesome-typescript-loader\dist.babel\deps.js:592:88)
at C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\node_modules\awesome-typescript- loader\dist.babel\deps.js:400:37
at run (C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\node_modules\core-js\module s\es6.promise.js:87:22)
at C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\node_modules\core-js\modules\es6 .promise.js:100:28
at flush (C:\Users\mestrada\Desktop\schema-JSON\angular2-schema-form-demo-master\node_modules\core-js\modu les_microtask.js:18:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/node_modules/ng2sf-t inymce/dist/src/tinymce.widget.d.ts:1:30
Cannot find module 'angular2-schema-form'.

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/src/app/app.componen t.ts:2:31
Cannot find module 'angular2-schema-form'.

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/src/app/app.module.t s:8:7
Cannot find module 'angular2-schema-form'.

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/src/app/wizard.widge t.ts:1:35
Cannot find module 'angular2-schema-form'.

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/src/app/wizard.widge t.ts:43:37
Property 'schema' does not exist on type 'WizardWidget'.

ERROR in [default] C:/Users/mestrada/Desktop/schema-JSON/angular2-schema-form-demo-master/src/main.browser.ts: 3:31
Cannot find module 'angular2-schema-form'.
`

I followed the instruction how to implement it, although I'm not doing it on app.component.ts I'm implementing it on the actual component which is going to use this.

I'm not sure about the main.browser.ts, but I created that and pasted the code for this file but it still giving me this big error.

Can you shed a light on this error please

Error: Uncaught (in promise): Error: Error in ./InterfaceComponent class InterfaceComponent - inline template:94:19 caused by: Cannot read property 'type' of undefined TypeError: Cannot read property 'type' of undefined at FormComponent.ngOnChanges (http://localhost:3000/main.bundle.js:62933:26) at Wrapper_FormComponent.detectChangesInInputProps (/SchemaFormModule/FormComponent/wrapper.ngfactory.js:54:18) at _View_InterfaceComponent0.detectChangesInternal (/AppModule/InterfaceComponent/component.ngfactory.js:522:29) at _View_InterfaceComponent0.AppView.detectChanges (http://localhost:3000/main.bundle.js:58615:14) at _View_InterfaceComponent0.DebugAppView.detectChanges (http://localhost:3000/main.bundle.js:58720:44) at _View_InterfaceComponent_Host0.AppView.detectViewChildrenChanges (http://localhost:3000/main.bundle.js:58641:19) at _View_InterfaceComponent_Host0.detectChangesInternal (/AppModule/InterfaceComponent/host.ngfactory.js:33:8) at _View_InterfaceComponent_Host0.AppView.detectChanges (http://localhost:3000/main.bundle.js:58615:14) at _View_InterfaceComponent_Host0.DebugAppView.detectChanges (http://localhost:3000/main.bundle.js:58720:44) at ViewRef_.detectChanges (http://localhost:3000/main.bundle.js:41840:20) at resolvePromise (http://localhost:3000/main.bundle.js:81977:31) at http://localhost:3000/main.bundle.js:81954:13 at ZoneDelegate.invoke (http://localhost:3000/main.bundle.js:81741:26) at Object.onInvoke (http://localhost:3000/main.bundle.js:28680:37) at ZoneDelegate.invoke (http://localhost:3000/main.bundle.js:81740:32) at Zone.run (http://localhost:3000/main.bundle.js:81623:43) at http://localhost:3000/main.bundle.js:82011:57 at ZoneDelegate.invokeTask (http://localhost:3000/main.bundle.js:81774:35) at Object.onInvokeTask (http://localhost:3000/main.bundle.js:28671:37) at ZoneDelegate.invokeTask (http://localhost:3000/main.bundle.js:81773:40)

JSON schema looks like this:
{ "type": "object", "properties": { "Name": { "type": "string" }, "Number": { "format": "int32", "type": "integer" }, "PointInTime": { "format": "date-time", "type": "string" }, "Url": { "type": "string" }, "Children": { "type": "array", "items": { "type": "object", "properties": { "ChildName": { "type": "string" }, "ChildNumber": { "format": "int32", "type": "integer" }, "ChildPointInTime": { "format": "date-time", "type": "string" }, "CustomData": { "type": "object", "additionalProperties": { "type": "array", "items": { "type": "object" } } } } } }, "CustomData": { "type": "object", "additionalProperties": { "type": "array", "items": { "type": "object" } } } } }

After release: 1.0.0-alpha.24, the custom widget example (so called: "wizard") where you could page through the field-set's is not working anymore. In case you have a large json schema which you want to use in this control, then it becomes necessary from a UX perspective to be able to group/page/tab.....things (so as user you get the overview). Can you fix this in a newer release?

22181 verbose cwd C:\Users\Nirupama\Downloads\angular2-seed-master\angular2-seed-master
22182 error Windows_NT 10.0.10586
22183 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "angular2-schema-form" "--save-dev"
22184 error node v4.4.7
22185 error npm v2.15.8
22186 error code EPEERINVALID
22187 error peerinvalid The package @angular/[email protected] does not satisfy its siblings' peerDependencies requirements!
22187 error peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.5
22187 error peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.5
22187 error peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.5
22187 error peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.5
22187 error peerinvalid Peer @angular/[email protected] wants @angular/common@^2.0.0-rc.4
22187 error peerinvalid Peer [email protected] wants @angular/[email protected]
22188 verbose exit [ 1, true ]

Please suggest!

When I add a 'richtext' field in my schema, I get an error:
Failed to load: /node_modules/tinymce/plugins/code/plugin.js

Hi,

I'm trying to use this on my application, I followed the installation on the main page and its giving me

Error: Error: XHR error (404 Not Found) loading http://localhost:3000/angular2-schema-form(…)

I'm using SystemJs Config and I also tried adding it in my config js but then it throws an error regarding lodash and validator.

var map = { 'angular2-schema-form': 'node_modules/angular2-schema-form' }
var packages = { 'angular2-schema-form': { main: './dist/index.js', defaultExtension: 'js' }

Can you shed a light on this, please.

Is it possible to have a guide for rc.5 and for systemjs config users?

Thanks

The extra code fails when the schema is undefined/null

   if(!this.schema.type) {
      this.schema.type = 'object';
    }

I suppose it should be:

   if(this.schema && !this.schema.type) {
      this.schema.type = 'object';
    }

this issue is quite similar to #18

So i was using 1.0.0-alpha.32 and everything is ok , until today i upgrade it to 1.0.0-alpha.33. After the upgrade i received the error Cannot find module 'angular2-schema-form'.

Is there anything else i need to do for the new upgrade? because i notice there is no change done in readme.

thanks!

a lot of error when

npm run build

this is just an extract (the first couple of errors), maybe typings.json is needed?
thx

ERROR in ./src/schema-form/defaultwidgets/array/array.widget.ts
Module not found: Error: Cannot resolve module '@angular/core' in /root/git/angu
lar2-schema-form/src/schema-form/defaultwidgets/array
resolve module @angular/core in /root/git/angular2-schema-form/src/schema-form/d
efaultwidgets/array
  looking for modules in /root/git/angular2-schema-form/node_modules
    /root/git/angular2-schema-form/node_modules/@angular doesn't exist (module a
s directory)
[/root/git/angular2-schema-form/node_modules/@angular]
 @ ./src/schema-form/defaultwidgets/array/array.widget.ts 2:13-37

ERROR in ./src/schema-form/defaultwidgets/object/object.widget.ts
Module not found: Error: Cannot resolve module '@angular/core' in /root/git/angu
lar2-schema-form/src/schema-form/defaultwidgets/object

'textline' is supposed to be a single-line text (= input type="text") while 'text' is supposed to be a multiline text (=textarea)

(and textline should be the default widget for string fields)

I am trying to use angular2-schema-form with the latest version of angular-cli.

When I am doing npm start then I am getting this issue : ERROR in SchemaFormModule is not an NgModule

I have checked the issue with angular-cli forums and it is happening with a lot of other modules, and according to what I understood on the forums the angular2 packages in angular2-schema-form need to be updated as well to make it usable with cli projects.

My Angular2-Cli setup:
angular-cli: 1.0.0-beta.24
node: 7.2.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

What are your suggestions ?

nevermind.

I have dropdown list and would like to change Json Schema when it is fired the change event.

Pls advice!

Hello. When, I change value of a key in the model, view not redrawn. It is redrawn when I delete a model, and then re-assigns the object with values.
For example. I have a jsonSchemaForm - input and button. When I clicked on a button I changed value at model, which complies to input. But in view value in input doesnt change.

Hi,
We would like to collaborate and contribute to your project.
We have ideas to enrich the form capabilities.
Are you interested?

Shaul Almog
Sapiens Technologies

At the moment, this line https://github.com/makinacorpus/angular2-schema-form/blob/master/src/schema-form/schemapreprocessor.ts#L22 breaks if the schema is null.

We should tolerate that schema is not yet available at the time we run preprocessor (if the schema is retrieved from a backend for instance).

I have tried to use the module as described in the README and encountered the issue Cannot find module 'angular2-schema-form'..

It is also tracked for the demo project fbessou/angular2-schema-form-demo#5

I think it could be related to #1 ?

Trying to use this data to create a form and I get the following error:

ORIGINAL EXCEPTION: Undefined type undefined

If I copy the properties from the registers definition into the registers property, it displays the input just fine. Is this not supported or am I doing it wrong?

{
    "title": "Device Template",
    "definitions": {
        "registers": {
            "type": "object",
            "properties": {
                "perm": {
                    "type" : "string"
                }
            }
        }
    },
    "type": "object",
    "properties": {
        "deviceaddr": {
            "description": "Device Address",
            "type": "string"
        },
        "registers": { "$ref": "#/definitions/registers" }
    },
    "required": [ "deviceaddr" ]
}

Form renders fine when read from a file. However fails when tried with the response of the http call..

// Observable Version
import { Component, OnInit } from '@angular/core';
import { WidgetRegistry } from "angular2-schema-form";
import { TinyMCEWidget } from "ng2sf-tinymce";
import { Http, Response } from '@angular/http';


@Component({
  selector: 'test-list',
  template: '<schema-form class="col-md-6" [schema]="schemafromhttp" [model]="model" [actions]="actions"></schema-form>',

})
export class TestListComponent {

  errorMessage: string;
  thisSchemaForm: any;
  schemafromfile: any;
  schemafromhttp: any = {'properties': {}, "type": "object"};
  private actions:any = {};
  private model:any = {};

  constructor(private http: Http) {}

  ngOnInit() {
    this.schemafromfile = require("./sampleschema.json");
    console.log("read from file: ", this.schemafromfile);
    console.log("read from file: ", JSON.stringify(this.schemafromfile));
    this.http.get('http://127.0.0.1:8080/getRegSchemaDefinition?type=registration4').subscribe(res => {
      let schemafromhttp1 = res.json();
      schemafromhttp1.fieldsets = [{"fields": ["userID", "appID"]}];
      console.log('read from service: ', schemafromhttp1);
      this.schemafromhttp = schemafromhttp1;
      console.log('read from service: ', JSON.stringify(this.schemafromhttp));
    });
  }
}

the file that renders fine is attached is as, the http response is verified to be same.

{"properties":{"userID":{"type":"string","minLength":7,"maxLength":10,"description":"User ID"},"appID":{"type":"string","minLength":3,"maxLength":3,"description":"Application Identifier"}},"required":["userID"]}

Any heads up if anything specific is missing out?

This implementation doesn't support the schema standard, most notably on the use of 'title' to describe the fields and not supporting self-references.

http://json-schema.org/latest/json-schema-core.html

I'am getting the following error

[23:13:25] ionic-app-scripts 0.0.47
[23:13:25] build prod started ...
[23:13:25] clean started ...
[23:13:25] clean finished in 9 ms
[23:13:25] copy started ...
[23:13:25] ngc started ...
[23:13:28] build prod failed: Unexpected value 'SchemaFormModule' imported by the module 'AppModule'
[23:13:28] ionic-app-script task: "build"
[23:13:28] Error: Unexpected value 'SchemaFormModule' imported by the module 'AppModule'

Here's the system info
node v6.9.2
npm v4.0.5
Angular - 2.2.1
Ionic - 2.0.0-rc.4
angular2-schema-form - 1.0.0-alpha.32

As per this article
Angular Libraries that can utilize ngc require .metadata.json files to be included with the package

I have the following simple schema:

{
	"type": "object",
	"properties": {
		"maxNumberOfRetries": {
			"type": "number",
			"minimum": 0,
			"maximum": 10,
			"description": "Maximum number of retries"
		}
	}
}

This results in a nice numeric field in the UI with up/down spinner buttons.

However when I subscribe to the validation errors like this:

this.subscriptionForErrors = this.schemaForm.rootProperty.errorsChanges.subscribe(e => {
        if(e != null) {
          console.log('errors:');
           e.forEach(ee => console.log(ee));
        }
      });

I get the following error logged when I enter a number in the UI field:
code: INVALID_TYPE
message: Expected type number but found type string

Any idea?

Hi,

I am receiving an error when trying to use the library in a submodule of my application:
EXCEPTION: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

As per http://stackoverflow.com/a/39414253 I assume that there should be CommonModule included instead of BrowserModule in your schema-form.module.ts.
(Do not import BrowserModule in any other module. Feature modules and lazy loaded modules should import CommonModule instead. They need the common directives. They don't need to re-install the app-wide providers.)

Is there a way around this problem or is this a bug?

I then tried to import the module in my main app.module.ts (not in my sub.module.ts) but then <schema-form [schema]="mySchema"> is simply not rendered.
Can you maybe give me a hint?

Best regards

Chris

Hi @kiorky / @ebrehault / @regilero / @jpoliva / @samaradona

I am trying to integrate with a normal Angular 2 project but am getting error when I am trying to add:

import { disableDeprecatedForms, provideForms} from "@angular/forms"
import { WidgetRegistry } from "angular2-schema-form";

bootstrap: [AppComponent,[disableDeprecatedForms(),provideForms(),WidgetRegistry]]

My current project is just a seed project of Angular 2: https://github.com/mgechev/angular2-seed

My requirement is to have some pages dynamic and some pages static. So I tried both bootstrapping inside the the about.module.ts and also inside the app.module.ts

I am pretty new to Angular 2 and not able to find out why the integration is not working. Could you please help in integrating this?

Thank you!

Hello,

I'm trying to integrate angular2-schema-form in an angular2 project. It worked well until I fetched the latest commit ("Apply new project base from change-project-base"). The demo runs OK.
The error is :

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-schema-form/dist/schema-form/model.js
patchProperty/desc.set/wrapFn@http://localhost:3000/node_modules/zone.js/dist/zone.js:889:26 []
Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:151:28 [ => ]
ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:345:28 []

Error loading http://localhost:3000/node_modules/angular2-schema-form/dist/schema-form/model.js as "./model" from http://localhost:3000/node_modules/angular2-schema-form/dist/schema-form/form.component.js

As you can see, I'm using SystemJS.

Do you have any idea that could help ?

Thank you,

@fbessou we start thinking about making a releasable bundle, so angular2-schema-form could be used as an external dependency in any regular project.
But we do not need a bundle here, we just need the .ts files, because the project will have its own webpack setup to compile everything anyway.

Nevertheless, we need to clean up our dependencies (some are declared as devDependencies but should not, like z-schema).

To be able to split up code and validation (frontend/backend) development, it would be a nice feature to allow mapping of a JSON schema form to an existing form, f.e. mapping could be done via ids of input fields or name.

Hello again) Could I use subschema in this module? If it possible, could you show an object example of schema?

Is there a way to submit the form back to the server? Is there any way of binding the inputs?

Also does this support [enum]? something like this
, "Status":{ "enum":[ "Preparing", "AwaitingCompletion", "Cancelled", "Completed" ], "type":"string" },

Just hoping that the module would be something like this
http://brutusin.org/json-forms/#2

When adding the FieldRegistryService at bootstrap i get the following error:

zone.js:101 GET http://localhost:4200/angular2-schema-form 404 (Not Found)

I am using angular cli.

//main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { HTTP_PROVIDERS } from '@angular/http';
import { appRouterProviders } from './app/app.routes';
import { FieldRegistryService } from "angular2-schema-form";

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent, [appRouterProviders, HTTP_PROVIDERS, FieldRegistryService]);

Any idea what might be missing?

Hi
I need help to make new widget that take one or more properties and group them in a collapsible section
There is not Wiki for Widget making so I will appreciate your help.

Hi,
While I am trying to upload image file, the json value is coming null.
I am using the below in the json schema. Can you please advise.

"image":{
  "type":"string",
  "widget":"file",
  "media": {
    "binaryEncoding": "base64",
    "type": "image/*"

  }

The "required" array of the schema doesn't seem to impact the validation of the form.

Am I missing something ?

When using "visibleIf" and not specifying which fileds are required it makes the field required. A work around is to sepecify what fields are required and leaving the ones with "visibleIf" out.
this works and name is not required:

            "properties": {
                "consistent": {
                    "type": "boolean",
                    "widget": "checkbox",
                },
                "name": {
                    "type": "string",
                    "minLength": 1,
                    "description": "Name",
                    "title": "Name",
                    "visibleIf": {
                        "consistent": [true]
                    }
                }
            },
            "required": ["consistent"]

But the following doesn't work and name is required:

            "properties": {
                "consistent": {
                    "type": "boolean",
                    "widget": "checkbox",
                },
                "name": {
                    "type": "string",
                    "minLength": 1,
                    "description": "Name",
                    "title": "Name",
                    "visibleIf": {
                        "consistent": [true]
                    }
                }
            }

Hi, is it possible to generate the form on a (click)="generate()" because at first I render my JSON in textarea so I can I edit them then put a button with the function generate() though, I tried doing so using .innerHTML so I can add the whole <schema-form...> within the function but somehow its not generating the form.

my function()
var txtVal = (<HTMLInputElement>document.getElementById('RequestDisplay')).value; this.mySchema = txtVal; console.log(this.mySchema); document.getElementById('jsonForm').innerHTML = '<schema-form [schema]="mySchema" ></schema-form>'

Just curious as to why oneOf is required?

Can you please help me why i am getting issue. By seeing your previous closed issue i have tried to replace schema-form by sf-form in my template but still i am facing problem.

Hi,
Is there any way that we can implement bootstrap grid option ?

Hi,

I tested validations and noticed for the email validator the error is stored in ._errors and in .properties.email._errors. This will cause the error to be send to FormComponent.rootProperty.errorsChanges.subscribe. But when I add my own validation like the passwordCheck this will only be stored on .properties.passwordCheck._errors and the subscription will not get the error. Did I need to configure or change something to let own validators behave like the provided email validator?

Thanks in advance

Changes in DOM lead to removing focus from input fields
It makes impossible to type anything
Partially it can be fixed by adding trackBy function to *ngFor
But even after adding trackBy I saw some changes in DOM after clicking to input with ng2-bootstrap typeahead

Could a reference to the widget be added to FormProperty, so the widget can be accessed through the provided API and called by custom widgets?

On formelement.component.ts -> onWidgetInstanciated() -> add this.formProperty.widget = this.widget;

by using the schema (as below):
"fieldsets": [{ "fields": ["student"], "title": "Student" }, {...
the fields of student are showed 1 field per row:

• row#1) firstname
• row#2) lastname
• row#3) id
• and so on

is there a way to render the form in a different way like (2 fields x row):

• row#1) firstname, lastname
• row#2) id, age

it could be nice if bootstrap col classes were supported like:

• row#1) firstname(col-xs-6), lastname(col-xs-6)
• row#2) id(col-xs-4), age (col-xs-8)

thanks

Hi can you please add a id or something else, for customizing abort / save buttons.
For different button styles. Example

PS. 1.0.0-alpha.29 breaks my build.
[default] /home/sebastian/Dokumente/StuproGUI/app/src/app/app.module.ts:63:48 Cannot find module 'angular2-schema-form'.

Do you have any means/plans to use primeng widgets?

I am planning to rewrite a java swing ui, which uses xml schema to build its forms. I have chosen angular 2 for the development, and your project combined with primeng looks to me the best solution.

Is there possible to force re rendering of the form, I want to make possible to use multiple schemas, so I can switch them on button click or something like that.

When I am trying to start demo-example I've got the following error, while npm install

npm WARN EPEERINVALID [email protected] requires a peer of reflect-metadata@^0.1.3 but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN EPEERINVALID [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN EPEERINVALID @angular/[email protected] requires a peer of [email protected] but none was installed.
npm WARN EPACKAGEJSON [email protected] No repository field.

Should I downgrade to a @2.0.0-rc.6 or what is the best solution? thanks in advance

Using the install instructions, and adding the module to imports or the providers causes this error:

Uncaught ReferenceError: __extends is not defined(…)

If I click on the file where the error is occurring it shows this:

var PropertyGroup = (function (_super) {
    __extends(PropertyGroup, _super);   <<<this line
    function PropertyGroup() {
        _super.apply(this, arguments);
        this.properties = null;
    }
    ...etc

Am I missing something?

• if I add "readOnly": false to a property with type boolean it still gets disabled
• arrays ignore readonly completely. They are always enabled.

And a small question: Is there a way to make the whole form readonly?

Are there any plans to publish it there soon?