hamzahamidi / ajsf Goto Github PK

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

When trying to pass options to the component via the options attribute they don't have any affect.
I've tried a couple of different config variables but none have worked.

To Reproduce
Steps to reproduce the behavior:

<json-schema-form [schema]="case?.schema" [layout]="case?.form"
    [data]="case?.data" [options]="formOptions"
    (onSubmit)="submit($event)" [framework]="ionic"></json-schema-form>

My formOptions look like this:

formOptions: {
    addSubmit: false,
    defaultWidgetOptions: {
        listItems: 0
    }
};

Expected behavior
I expected the options to work which in this case would be that the form does not contain a submit button.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome 71

Additional information:
While debugging through the code I found that in the following function this.options always seems to be undefined:
https://github.com/hamzahamidi/Angular6-json-schema-form/blob/a900b55ea7c2e1664c74d12c525351ecbb8aac70/projects/angular6-json-schema-form/src/lib/json-schema-form.component.ts#L372-L403

Hi!

I am trying to port form angular2-json-schema-form to angular6-json-schema-form but I am having some issues with it.
I am using WidgetLibraryService like this:

... importing the service at the top of the file:
import { WidgetLibraryService } from 'angular6-json-schema-form/lib/widget-library/widget-library.service';
(also tried with:)
import { WidgetLibraryService } from 'angular6-json-schema-form';

... injecting the provider in constructor:
private widgetLibrary: WidgetLibraryService

... registering widgets:
widgetLibrary.registerWidget('widgetone', WidgetOneComponent);
widgetLibrary.registerWidget('text', InputComponent);
widgetLibrary.registerWidget('textarea', TextareaComponent);

But when I try to serve the app (non-prod), I get the following error:
ERROR in src/app/layout/content/content-create/content-create.component.ts(43,10): error TS2305: Module '"xxx/xxx/xxx/xxx/myproject/node_modules/angular6-json-schema-form/angular6-json-schema-form"' has no exported member 'WidgetLibraryService'.

What could be the problem here?

which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Use the code snippet from above.
2. Run "npm run start" for serving the app (ng serve)

Expected behavior
To have no errors at serving the app.

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [chrome]
• Version [latest]

Detailed Description
I am trying to use a data observable to generate the form. This doesn't seem to be supported

Context
Async data!

Possible Implementation

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Add loadExternalAssets="false" to the tag.
2. Notice that loadExternalAssets is "false" when passed to setLoadExternalAssets.

Expected behavior
Instead of being "false" it should be a bool but something seems to be setting this.loadExternalAssets to the string "false". I can't seem figure out what is setting it a string.

Desktop (please complete the following information):

• OS: [Windows 10]
• Browser [chrome]
• Version [72.0.3589.0]

Additional context
This doesn't cause an error it just causes it to lead the assets again which can be confusing since setting it to false should cause that not to happen.

Possible Implementation

Add a check to setLoadExternalAssets to see if it is a string and if so check to see if that string is "false".

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. got to https://hamidihamza.com/Angular6-json-schema-form/
2. past

{
  "schema": {
      "type": "object",
      "properties": {
          "value1": {"type": "string"},
          "array1": {
              "type": "array",
              "items": {
                  "type": "array",
                  "items": {
                      "type": "string"
                  }
              }
          }
      }
    
  },
  "layout": [
      {"key": "value1"},
      {"key": "array1",
          "type": "array",
          "items": [{
              "key": "array1[]",
              "type": "array",
              "items": [{
                 "key": "array1[][]",
                  "type": "string"
              }]
          }]
      }
  ],
  "data": {
      "value1": "value1",
      "array1":[["array11", "array12"], ["array21"]]
  }
}

as type.

Expected behavior
array1[0] should display the 2nd elements (array12).

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. install package with npm
2. fix issues related to missing packages (flex-layout and material)
3. imported needed modules
4. trying to use schema from example
5. ERROR Error: schema is invalid: data/properties/form should be object,boolean

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04Lts on Gnome 3.28
• Browser: chrome
• Version: latest

Log output covering before error and any error statements

ERROR Error: schema is invalid: data/properties/form should be object,boolean
    at Ajv.validateSchema (ajv.js:183)
    at Ajv._addSchema (ajv.js:312)
    at Ajv.compile (ajv.js:112)
    at JsonSchemaFormService.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormService.compileAjvSchema (angular6-json-schema-form.js:6099)
    at JsonSchemaFormComponent.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormComponent.initializeSchema (angular6-json-schema-form.js:8602)
    at JsonSchemaFormComponent.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormComponent.initializeForm (angular6-json-schema-form.js:8435)
    at JsonSchemaFormComponent.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormComponent.updateForm (angular6-json-schema-form.js:8336)
    at JsonSchemaFormComponent.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormComponent.ngOnChanges (angular6-json-schema-form.js:8312)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10514)

Detailed Description

Context

Possible Implementation

Describe the bug
which template:

• [√ ] MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Setup the library in an Angular v6 app as specified in the docs.
2. Used material design framework.
3. Defined schema and layout for the form.
4. The date type form field, which on selecting a date will go 1 day backward. For e.g., if I select 9Nov2018, it will be set in the form as 8Nov2018.

Expected behavior
On selecting a date from the date picker, it should set a correct selected date in the form.

Desktop (please complete the following information):

• OS: [MacOS, Windows]
• Browser [ chrome, safari]
• Version [12, 70.0.3538.77]

Additional context
Please let me know how to handle this scenario. We are planning to deploy this app in the production where clients will be using this forms.

Context

This change is really important because we have an application that requires a lot of date fields and the dates are being set 1 day backward by using this form.

I am not sure why others are not getting this behavior or have they handled this by themselves?

Hi, it's me again....

Layouting works well but after creation of whole layout i can see this error msg in browser console.

During debugging this error I found something:
This problem is caused by passing whole layout array as last layoutItem to buildLayout function.

which template:

• Bootstrap4FrameworkModule — Bootstrap 4

Question / To Reproduce
Is it possible (if not could you enhance) to make e.g. 2 fieldsets or sections next to each other?

Consider the following schema:

{
            "schema" : {
              "properties": {
                "inv_code": {
                  "description": "Invoice number",
                  "type": "string"
                },
                "inv_amount": {
                  "description": "Anount",
                  "type": "number",
                }
              },
              "required": [
                "inv_code",
                "inv_amount"
              ]
            },
            "form" : [
              {
                "type" : "section",
                "items" : [
                  {
                    "type": "fieldset",
                    "title" : "Code",
                    "htmlClass" : "col-6",
                    "items": [ "inv_code" ]
                  },
                  {
                    "type" : "fieldset",
                    "title" : "Amount",
                    "htmlClass" : "col-6",
                    "items": ["inv_amount"]
                  }
                ]
              }
            ]
        }

This renders the following:

As you can see ... each of the 2 fieldsets have the col-6 width (from bootstrap), but both are not shown next to each other. This I would expect in this case, would I?

Of course I know of the opportunity to put two fields next to each other like in the flex-layout example https://hamidihamza.com/Angular6-json-schema-form/?set=ng-jsf&example=ng-jsf-flex-layout&framework=bootstrap-4&language=en

But in my opinion the problem described above is a different case.

Thx in advance, best regards

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

Currently, we have support English and French validation messages. In addition, we can provide validation messages by using one of the 3 available methods i.e.

• String: A plain text message, which is always the same.
• String template: A text message that includes Angular template-style {{variables}}, which will be be replaced with values from the returned error object.
• Function: A JavaScript function which accepts the error object as input, and returns a string error message.

Is there an option where in my custom widget component I can subscribe to a language change event and trigger and update to update the layoutNode's validationMessages?

Trying to support Spanish and a few other custom languages in my forms

 this.languageSwitch.currentLang
        .subscribe(data => {

         this.options.validationMessages.required = 'CUSTOM_LANGUAGE_STRING

      });

To Reproduce
Steps to reproduce the behavior:

1. ...

Expected behavior
In my custom widget I am subscribed to a language Subject Observable. When I received an updated value the validation messages for the form should update.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
When selecting a new control in a form, the control does not get the expected focussed Angular styling. You can see this on the demo page:

https://hamidihamza.com/Angular6-json-schema-form/?set=ng-jsf&example=ng-jsf-flex-layout&framework=material-design&language=en

Try clicking in any of the generated text fields and the expected "blueish" underscore does not appear.

Expected behavior
The correct Angular focussed styling should be applied.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 70.0.3538.102

which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

This library depends on Lodash and imports _. into the components and services - which is not tree shakable by Webpack. It should instead import specific functions from the lodash-es (https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd)

Would you accept a pull request to fix?

Describe the bug
which template:

• [x ] Bootstrap4FrameworkModule — Bootstrap 4

A clear and concise description of what the bug is.

To Reproduce
It seems there is something broken with Updating the form value correctly when using array-types. But maybe I do sth. wrong

Eventually consider this PR in angular2-json-schema-form:
https://github.com/dschnelldavis/angular2-json-schema-form/pull/304

I have written my own widget which use ng-select https://github.com/ng-select/ng-select:

import {Component, Input, OnInit} from "@angular/core";
import {JsonSchemaFormService} from "angular6-json-schema-form";
import {AbstractControl} from "@angular/forms";

@Component({
    selector: 'my-ngselect-widget',
    templateUrl: 'my-ng-select.component.html'
})
export class MyNgSelectComponent implements OnInit {

    formControl: AbstractControl;
    controlName: string;
    controlValue: any;
    controlDisabled = false;
    boundControl = false;
    options: any;
    @Input() layoutNode: any;
    @Input() layoutIndex: number[];
    @Input() dataIndex: number[];

    //items$ : Observable;
    items = ["one", 'Two', "three"];

    constructor(
        private jsf: JsonSchemaFormService
    ) { }

    ngOnInit() {
        this.options = this.layoutNode.options || {};
        this.jsf.initializeControl(this);
    }

    updateValue(value) {

        // on option "multiple" value is an array
        console.log("ng select value", value);

        this.jsf.updateValue(this, value);
    }
}

This Component I successfully register as new Widget for angular6-json-schema-form. My ng-select component is rendered successfully. But if I activate the "multiple"-Option, the value in "updateValue" is an array. Because of this my Schema is like this:

"schema" : {
              "properties": {
                "inv_code": {
                  "description": "Invoice no.",
                  "type": "string"
                },
                "inv_amount": {
                  "description": "Amount",
                  "type": "number"
                },
                "inv_reason" : {
                  "type" : "array",
                  "description" : "reason",
                  "items" : {
                    "type" : "string"
                  },
                  "default" : []
                }
              },
              "required" : [ "inv_code", "inv_amount"]
            },
            "layout" : [
              {
                "type" : "fieldset",
                "items" : [
                  {
                    "key": "inv_code"
                  },
                  {
                    "key" : "inv_amount"
                  },
                  {
                    "key" : "inv_reason",
                    "type" : "ngselect",
                    "options" : {
                      "multiple" : true
                    }
                  }
                ]
              }
            ]
}

If I add one value from ng-select. Everything is fine. The form value for inv_reason is an array which contains the first selected option. But if I add one more item, then console.log error occured with the following:

ERROR Error: Must supply a value for form control at index: 0.
    at forms.js:3636
    at forms.js:3614
    at Array.forEach (<anonymous>)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:3614)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._checkAllValuesPresent (forms.js:3634)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValue (forms.js:3478)
    at JsonSchemaFormService.push../node_modules/angular6-json-schema-form/fesm5/angular6-json-schema-form.js.JsonSchemaFormService.updateValue (angular6-json-schema-form.js:6330)
    at MyNgSelectComponent.push../src/app/plugins/jschema-form/widget/ngx-schema-form/object/my-ng-select.component.ts.MyNgSelectComponent.updateValue (my-ng-select.component.ts:39)
    at Object.eval [as handleEvent] (MyNgSelectComponent.html:17)
    at handleEvent (core.js:10258)

Expected behavior
The array-value should be correct updated in the form.

I'm using Angular 6 and the latest version of this package here.

Thx in advance, Best Regards

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.
In an Angular 6 application, after successfully creating the form, when trying to edit or delete the text from input text or text area, the cursor constantly moves to the end of each interaction.

To Reproduce
Steps to reproduce the behavior:

1. Create an Angular app.
2. Include Angular6-json-schema-form library as documented.
3. Define schema and create the layout according to the flex layout.
4. Enter some text into the input box or text area, the described problem occurs.

Expected behavior
We should be able to enter or edit text in the text-box even from the middle of the text.

Screenshots
Please refer to the following youtube video: https://youtu.be/fp5UYvRzZLY

Desktop (please complete the following information):

• OS: Windows, MacOS and Linux
• Browser: Chrome, Safari, Firefox, IE
• Version: latest

Log output covering before the error and any error statements

NA

Additional context
I am not sure, whether this problem is caused by the new layout I have used or any misconfiguration. Let me know if any working prototype is needed.

Context

Editing of the forms is a compulsory task for all the users.

Editing of the forms is a compulsory task for all the users.

I found out, that you can provide options to properties directly in the schema.

Example:
The following snippet adds the option "floatLabel" to the property "first_name". If you select "material-design" as framework, then the label of the corresponding input field is always shown above the input field

{
  "schema": {
    "type": "object",
    "properties": {
      "first_name": {
          "type": "string",
          "floatLabel": "always"
      }
    }
  }
}

My problem is now, that I don't have control over the schema. I receive it from a web service.
I just want to specify the options for a widget type once, which shall then be applied to all widgets of this type. Can such options be specified somewhere, e.g. in the global options object?

Describe the bug
When I try to use your library to generate form, based on draft-04 version. I get this error:

no schema with key or ref "http://json-schema.org/draft-06/schema#"

Here is the json schema that I am using:

{
"$schema": "http://json-schema.org/draft-04/schema#",
"title": "Contact",
"type": "object",
"properties": {
"work": {
"$ref": "#/definitions/phone"
},
"home": {
"$ref": "#/definitions/phone"
}
},
"definitions": {
"phone": {
"type": "object",
"properties": {
"number": {
"type": "string"
},
"extension": {
"type": "string"
}
}
}
}
}

Desktop (please complete the following information):

• OS: OS X El Captain
• Browser: All
• Version: 10.11.6

Describe the bug
It's not really a bug, but I would like to repeat values from the previous row into the new row when the "add" button is being used on an array type. I'm trying to go through the code and see if I can hook up to some event, but I can't figure out how to do it. Help would be appreciated.

• MaterialDesignFrameworkModule — Material Design

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. https://hamidihamza.com/Angular6-json-schema-form/?set=asf&example=asf-simple&framework=material-design&language=en
   In this example there is custom submit button (at least text on it), it is clickable even if form is empty. If you remove submit button node completely from json, button will be rendered by default Submit button and it disabled as it should be.

Expected behavior
Disabled mode for submit button with custom text while required fields are empty

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. ...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Describe the bug
which template:

(does not seem to depend on the template)

• [* ] MaterialDesignFrameworkModule — Material Design
• [ *] Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• [* ] NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Render the form with the following spec:

  "schema": {
    "type": "object",
    "properties": {
      "name": {
        "type": "object",
        "properties": {
          "sub-name": {
            "type": "string"
          }
        }
      },
      "other": {
        "type": "string"
      }
    }
  },
  "layout": [
    "*"
  ]
}

It works as intended

2. Try to adding constraints on layout, e.g.

  "schema": {
    "type": "object",
    "properties": {
      "name": {
        "type": "object",
        "properties": {
          "sub-name": {
            "type": "string"
          }
        }
      },
      "other": {
        "type": "string"
      }
    }
  },
  "layout": [
    "name",
    "other"
  ]
}

Only the fieldset for "name" is generated.

Expected behavior
Form rendering should happen even when specifying a field with a depth greater than 1 in the layout.

Screenshots
Expected:

Got:

Desktop (please complete the following information):

• OS: [Linux]
• Browser [any]

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

When an array has an item with a default value set the form output will include one array item.

To Reproduce

Paste the following JSON on https://hamidihamza.com/Angular6-json-schema-form/:

{
    "schema": {
        "properties": {
            "offers": {
            "description": "Enter new offers.",
            "items": {
                "properties": {
                    "offerNo": {
                        "title": "Offer no.",
                        "type": "string"
                    },
                    "status": {
                        "default": "new",
                        "type": "string"
                    }
                },
                "title": "Offer",
                "type": "object"
            },
            "title": "New Offers",
            "type": "array"
            }
        },
    "type": "object"
    }
}

Submit the form and see that the offer array contains one entry.
If a user doesn't want the item in the array the user needs to manually remove it.

Expected behavior
In the sample above remove the "default": "new", part and submit the form again. Without the default the result will not include the array.
I would expect the same behavior even when an item of the array has a default value set.

Desktop:

Windows 10
Chrome 71

Additional remarks
In addition to fixing the issue itself I think it would be nice to have a setting for never populating empty arrays in the UI in the first place.
That would be useful in cases where users don't need to add an array item right off the start.

Hello,

I was in need of a few fixes to this repo that I didn't have time to get a PR approved for so I forked it and while I was fixing those I also upgraded to angular 7. You can check it out here.

Can't resolve an external local file reference in $ref.
Is there any solution to use local external schema file reference in $ref.

Hi,
in our application we don't want to use embedded object nesting features of this framework.
Instead of this we want to display link which will be used as a entrypoint for generating new form.

So we have custom widget called object-link, I can easily use them for objects using custom layout but I also want to use default nesting features for arrays and things like that.

Right now i have to generate layout dynamically, replace all occurences of type:object with type:object-link and dynamically reconstruct the layout for other types (arrays and things like this).

I have complicated recursive function to do that and it works relatively good but best solution is to specify no layout to use embedded features and just replace objects.

Creating complete custom layout for features this plugin already have is pain... Unfortunately using our object-link widget as a override of "object" or "fieldset" types no work.

Do you have any ideas how to do that, thank you in advance very much.

Issue type

I'm submitting a (check one):
[ x] Bug report
[x ] Feature request
[ ] Regression (something that used to work, but stopped working in a newer version)
[ ] Support request
[ ] Documentation issue or request

Prerequisites

Before posting, make sure you do the following (check all):
[x ] Confirm you are using the latest versions of all necessary packages (or if not, explain why not)

Current behavior

When you have parent property, that isn't required, but has self required properties, it gives an error. I don't know how to solve this. https://json-editor.github.io/json-editor/ fro example, has optional objects as initially non listed and addable. So when you add the object, it's properties are required, but can also skip the whole object, as it is optional.

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

Writing a drag-drop form builder.

Detailed Description
Started to integrate draggable-droppable when I realised that there's an isDraggable.

Context
What's the trick to using this?

Possible Implementation
Plan to use the JSON of the form, and just reorder array elements. Then re-render. Two-way databinding should make this simpler.

Happy to implement it myself, but wouldn't mind some tips, and posting this issue in case I missed the implementation / you've planned one.

EDIT0: Some concepts
https://github.com/sebt-team/angular-deform

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. ...

Expected behavior
Use no-framework and plain html with a pre-defined schema

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

ERROR in angular6-json-schema-form\angular6-json-schema-form.ts(51,53): Error during template compile of 'MaterialDesignFrameworkModule'
  Could not resolve @angular/flex-layout relative to C:/dev/FunPassport/src/FunFair.FunPassport.Web/node_modules/angular6-json-schema-form/angular6-json-schema-form.d.ts..
node_modules/angular6-json-schema-form/lib/framework-library/material-design-framework/material-design-framework.module.d.ts(1,37): error TS2307: Cannot find module '@angular/material'.

Additional context
Using typescript components and angular cli based project, version 6+

Detailed Description

Context

Possible Implementation

How can I make this work without templates?

Describe the bug
which template:

• Bootstrap4FrameworkModule — Bootstrap 4

When I try to add an onChange Event in my single field, it doesn't fire. In the previous version of angular-schema-form, this event is triggered.
Could you help me, please?
This is my layout and my schema

 yourFormLayout = [
  "id",
  "name",
  {
    key: "fields",
    items: [
      {
      key:"fields[].name",
      },
      {
        key:"fields[].type",
        type:"select",
        fieldHtmlClass:"field-type",
        onChange: function(modelValue,form) {
         console.log("Test",modelValue);
        }
      },
      {
        key:"fields[].enumerator",
        htmlClass: "enumerator-panel",
        items:{type:"string"}
      }
    ],
  }
]

  categorySchema = {     
   "type": "object",
   "title": "The Root Schema",
   "required": [
     "id",
     "name",
     "fields"
   ],
   "properties": {
     "id": {
       "type": "string",
       "title": "The Id Schema"
     },
     "name": {
       "type": "string",
       "title": "The Name Schema"
     },
     "fields": {       
       "type": "array",
       "title": "Fields",
       "items": {         
         "type": "object",
         "title": "Items",
         "required": [
           "name",
           "type"
         ],
         "properties": {
           "name": {             
             "type": "string",
             "title": "The Name Schema"             
           },
           "type": {             
             "type": "string",
             "title": "The Type Schema",
             "enum":["String","Integer","Boolean","Enum"]
           },
           "enumerator":{
             "type":"array",
             "title": "Add Enumerator",
             "items":{
                 "type":"string"
             }
           },
           "required":{"type":"boolean"}
           
         }
       }
     }
   }
 }

Thanks

When we enter date in the input box for date picker, even if the entered date is out of the range (i.e. maximum and minimum date mentioned for the date picker), the form is still valid (submit button is enabled). Form data should have been invalid & submit button should have been disabled. As expected, the dates lesser than the minimum data and greater than the maximum are grayed out (disabled).

This behavior can be observed in every templates. But, Material template at least highlights the invalid date with red border around the for field (yet the form is valid and submit button is enabled. That's not cool!).

which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to the demo site https://hamidihamza.com/Angular6-json-schema-form or https://angular2-json-schema-form.firebaseapp.com/
2. In the layout json, find birthday field and change it to { "key": "birthday", "type": "date","minimum":"2018-12-04" }
3. You can see that, the birthday is highlighted with red border and submit is still enabled, form data being valid!

Expected behavior
When user enters date which is beyond the range, the form should be invalid and submit button should be disabled.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] - Window
• Browser [e.g. chrome, safari] - Chrome
• Version [e.g. 22] - 70

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Addable sections cannot be removed when no framework is chosen - no "X", remove button, or similar is visible. This can be reproduced in the demo by chosing None (Plain HTML):
https://hamidihamza.com/Angular6-json-schema-form/

Validation is triggering all the time on Angular 6 which makes the lib unusable. The cursor jumps always to the end of the input.

which template:

• [x ] MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a app using ng (Angular CLI: 6.2.2)
2. Add version 1.0.4
3. Create simple schema
4. Register isValid function
5. See its called all time regardless what you (false, false, true, true)
6. Click into a inputbox and the cursor jumps to the end

Expected behavior
Should work like the demo page - I also tested my schema on the demo page and their it works so I guess its angular 6 problem.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Browser Chrome(Version 69.0.3497.100 (Official Build) (64-bit))

Describe the bug
which template:
[√ ] MaterialDesignFrameworkModule — Material Design
Bootstrap3FrameworkModule — Bootstrap 3
Bootstrap4FrameworkModule — Bootstrap 4
NoFrameworkModule — plain HTML
Other (please specify below)

A clear and concise description of what the bug is.
Previous issue #35
Commit# 5c180bd
Dear @Benjitos, @hamzahamidi. This above commit doesn't resolve the date issue in different time zones. For my local system, it's working fine. After deploying the app in EC2 instance, the date behaves as shown in the following video. Please check it here: https://youtu.be/D0iwFov4t7Q

Scenario:
Let's say if I select a date as 14th, the displayed date will be 12th, but the date in the model(data) will be 13th
Initially, after your last commit, I updated my package to v7.0.1, this issue seems to be solved in my local date settings. But after deploying in the client environment, I still got this issue intact.

To Reproduce
Steps to reproduce the behavior:

1. Setup the library in an Angular v6 app as specified in the docs.
2. Used material design framework.
3. Defined schema and layout for the form.
4. From my timezone in IST, I changed my system timezone to CST(Chicago)[Indian Standard Time is 11 hours and 30 minutes ahead of Central Time]
5. The date type form field, which on selecting a date will go 1 day backward. For e.g., if I select 9Nov2018, it will be set in the form as 8Nov2018.

Expected behavior
On selecting a date from the date picker, it should set a correct selected date in the form.

Desktop (please complete the following information):
OS: [MacOS, Windows]
Browser [ chrome, safari]
Version [12, 70.0.3538.77]

Additional context
I think the time is being saved with default timezones and we should consider generalizing the date across all the timezones. Material datepicker has this issue.

Context
This change is really important because we have an application that requires a lot of dates and the dates are being set 1~2 day backward by using this form from different timezones.

@hamzahamidi , I know you are busy, but can you please comment on this.

this is not an issue this is a question have been on it for some time now
how can I update value of dropdown select after the form is been rendered

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Remove the schema portion from the component template

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.
id for vertical checkboxes is "undefined", and should be the same as horizontal.
To Reproduce
Steps to reproduce the behavior:

1. look at checkboxes component and compare horizontal and vertical checkboxes.
   Horizontal is correct.

Expected behavior
A clear and concise description of what you expected to happen.
once fixed clicking on label will control checkbox checked value

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

The updated Material Design no longer uses floatPlaceholder. They changed it to floatLabel.

Expected behavior
Labels actually float.

I was going to submit a pull request but the change is already in the code, it just hasn't been released.

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

Tried using the library both on the project I'm working on and on a brand new clean project created using Angular CLI. Followed the instructions both on README.md and the example project, both lead to errors.

To Reproduce
Steps to reproduce the behavior:

1. Create new project with Angular CLI: ng new testAngular
2. Install dependencies, modifying package.json and running rm -rf node_modules/ && npm i:

{
  "name": "test-angular",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~7.0.0",
    "@angular/cdk": "^7.0.0",
    "@angular/common": "~7.0.0",
    "@angular/compiler": "~7.0.0",
    "@angular/core": "~7.0.0",
    "@angular/flex-layout": "^7.0.0-beta.22",
    "@angular/forms": "~7.0.0",
    "@angular/http": "~7.0.0",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "angular6-json-schema-form": "^7.0.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.5",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

3. Edit app.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatSidenavModule,
  MatToolbarModule,
  MatIconModule,
  MatListModule,
  MatInputModule,
  MatMenuModule,
  MatDialogModule,
  MatSnackBarModule,
  MatTabsModule,
  MatTableModule,
  MatSortModule,
  MatSelectModule
} from '@angular/material';
import { JsonSchemaFormModule, NoFrameworkModule } from 'angular6-json-schema-form';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatButtonModule,
    MatCardModule,
    MatCheckboxModule,
    MatSidenavModule,
    MatToolbarModule,
    MatIconModule,
    MatListModule,
    MatInputModule,
    MatMenuModule,
    MatDialogModule,
    MatSnackBarModule,
    MatTabsModule,
    MatTableModule,
    MatSortModule,
    MatSelectModule,
    NoFrameworkModule,
    NoFrameworkModule, JsonSchemaFormModule.forRoot(NoFrameworkModule)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Add form tag to html, and scheme data to ts:

<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="no-framework"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>

the yourJsonSchema is a random form taken from the example category
5. ng serve

Expected behavior
The app compile and shows a form.

Screenshots
No relevant screenshot saved.

Desktop (please complete the following information):

• OS: OsX
• Browser Firefox
• Version 65.0b5 (64-bit)

Log output covering before error and any error statements

ERROR in src/app/app.module.ts(23,10): error TS2305: Module '"/Users/edo/Gits/testAngular/node_modules/angular6-json-schema-form/angular6-json-schema-form"' has no exported member 'JsonSchemaFormModule'.

Additional context
Importing the library as specified in the README.md didn't work either.

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Open the demo page
2. Load the data from this file data.zip
3. Try to edit fields

Expected behavior
The changing of input values need to be smooth

Desktop (please complete the following information):

• Browser Chrome Version 70.0.3538.110 (Official Build) (64-bit)

Describe the bug
which template:

• [√] MaterialDesignFrameworkModule — Material Design
• [√ ] Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• [√ ] NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.
radio buttons in an array change radio button state in other array entries
To Reproduce
Steps to reproduce the behavior:
for the schema, bellow add array items and hit radio buttons. changes affect different array entries

{
"schema": {
"title": "Comment",
"type": "object",
"properties": {
"comments": {
"type": "array",
"items": {
"type": "object",
"properties": {
"something": {
"title": "Radio",
"type": "string"
}
}
}
}
}
},
"form": [
{ "key": "comments",
"add": "New",
"style": { "add": "btn-success" },
"items": [
{
"key": "comments[].something",
"type": "radios-inline",
"titleMap": [
{"name": "A", "value": "a"},
{"name": "B", "value": "b"},
{"name": "C", "value": "c"},
]
}
]
},
{ "title": "OK",
"type": "submit",
"style": "btn-info"
}
]
}

Desktop (please complete the following information):

• OS: [e.g. iOS] - IOS 12
• Browser [e.g. chrome, safari] - Chrome & Opera
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Describe the bug
which template:

MaterialDesignFrameworkModule — Material Design

A clear and concise description of what the bug is.

To Reproduce
schema: {
type: "object",
title: "Comment",
properties: {
name: {
title: "Name",
type: "string"
},
email: {
title: "Email",
type: "string",
pattern: "^\S+@\S+$",
description: "Email will be used for evil."
},
comment: {
title: "Comment",
type: "string",
maxLength: 20,
validationMessage: "Don't be greedy!"
},
contact: {
type: "object",
title: "Contact",
properties: {
firstname: {
title: "Firstname",
type: "string"
},
lastname: {
title: "Lastname",
type: "string"
}
}
}
},
required: [
"name",
"email",
"comment"
]
}

Expected behavior
No error should occur here

Desktop (please complete the following information):

• OS: Win10
• Browser Chrome/Edge
• Version Latest on both

Log output covering before error and any error statements

Uncaught TypeError: Cannot read property 'endsWith' of undefined
    at LayoutGapStyleBuilder.push../node_modules/@angular/flex-layout/esm5/flex.es5.js.LayoutGapStyleBuilder.buildStyles (vendor.js:89982)
    at DefaultLayoutGapDirective.push../node_modules/@angular/flex-layout/esm5/core.es5.js.BaseDirective2.addStyles (vendor.js:85516)
    at DefaultLayoutGapDirective.push../node_modules/@angular/flex-layout/esm5/flex.es5.js.LayoutGapDirective.updateWithValue (vendor.js:90190)
    at MediaMarshaller.push../node_modules/@angular/flex-layout/esm5/core.es5.js.MediaMarshaller.updateElement (vendor.js:88331)
    at SafeSubscriber._next (vendor.js:88421)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (vendor.js:188363)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (vendor.js:188301)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (vendor.js:188244)
    at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (vendor.js:188221)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (vendor.js:193797)

Additional context
Problem only happens with nested objects seems so far

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

"type": "card" incorrectly overwrites the class attribute of <mat-card>. <mat-card> should have class="mat-card", but it doesn't.

To Reproduce
Steps to reproduce the behavior:

[
  {
    "type": "card",
    "title": "My Card",
    "items": [
      {
        "type": "div",
        "display": "flex",
        "flex-direction": "row",
        "options": {
          "fxLayoutGap": "10px"
        },
        "items": [
          {
            "key": "firstName",
            "notitle": true,
            "placeholder": "First Name",
            "options": {
              "floatLabel": "always",
              "fxFlex": "1 1 35%"
            }
          },
          {
            "key": "lastName",
            "notitle": true,
            "placeholder": "Last Name",
            "fxFlex": "1 1 30%",
            "options": {
              "floatLabel": "always"
            }
          }
       ]
   }
]

Expected behavior
When mat-card is inserted into the DOM, it should look something like this: <mat-card class=".mat-card">

Desktop (please complete the following information):

• OS: MacOS
• Browser: chrome
• Version: 70

Context
This prevents mat-card from rendering properly.

Possible Implementation
in flex-layout-section.component.ts

    <mat-card *ngIf="containerType === 'card'"
      [class]="options?.htmlClass || ''"

should be

    <mat-card *ngIf="containerType === 'card'"
      [ngClass]="options?.htmlClass || ''"

Describe the bug
which template: - All-of-em

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

I apologize for the vagueness of this report, I am at wits end and unable to provide much detail as to the cause, or remedy of the problem.

On an orderable array (aka draggable), the drag function appears to not work unless you follow up the drag action with a click action on one of the elements in the list. This is not present in the demo and I cannot replicate the behavior in the demo with what is being see locally.

Expected behavior
A mouse up event after drag should alter order, however in my experience, the mouse up does nothing but a following mouse down and up (aka click) then produces the desired result.

Desktop (please complete the following information):

• OS: [e.g. iOS]
  OSX 10.13.6 (17G3025)
• Browser [e.g. chrome, safari]
  Chrome
• Version [e.g. 22]
  70.0.3538.110 (Official Build) (64-bit)

Note this is also present in Safari 12.0.1 (13606.2.104.1.2)

Log output covering before error and any error statements
No errors observed

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

Use plain json without schema
It fails to validate - schema is undefined

More details:

ajv.js

function validate(schemaKeyRef, data) {
	...
    v = this.getSchema(schemaKeyRef);
	...
}

ajv.js line 238
It compares keyRef = "http://json-schema.org/draft-06/schema# with "http://json-schema.org/draft-07/schema"

  return self._schemas[keyRef] || self._refs[keyRef] || self._fragments[keyRef];

result "undefined" will be returned

Error in line 92 will be thrown:

    if (!v) throw new Error('no schema with key or ref "' + schemaKeyRef + '"');

Expected behavior

The correct schema will be taken

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
• Angular 7

Hi,
at first, thank you very much for creating Angular6 version of this library. We using them on our projects and update to angular 6 is one of my current tasks.

We faced various type of errors which we can fix somehow (see our fork: https://github.com/jakubjosef/Angular6-json-schema-form).
Right now we have working version (except custom layouting which is also not working and it's very important for us) but in general we have working version but this version cannot be compiled for production use using AOT. We see very weird error:

 ~/xxx/xxx   angular6  yarn build:prod
yarn run v1.7.0
$ ng build --prod

Date: 2018-07-23T16:31:49.517Z - Hash: b30aed42afefba54fbff - Time: 35644ms
1 unchanged chunks
chunk {scripts} scripts.e3a6c46eaad619fb8878.js (scripts) 156 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.a253ac1ee1863b4bf008.css (styles) 175 kB [initial] [rendered]
chunk {2} polyfills.98574895d130bf971ae7.js (polyfills) 66.3 kB [initial] [rendered]

ERROR in ./node_modules/angular2-json-schema-form/json-schema-form.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/node_modules/angular2-json-schema-form'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app'
ERROR in ./src/app/form-generation-page/form-generation-page.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generation-page'
ERROR in ./src/app/form-generator/add-item/add-item.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/add-item'
ERROR in ./src/app/form-generator/array-table-widget/array-table-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/array-table-widget'
ERROR in ./src/app/form-generator/recurcive-test-widget/recurcive-test-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/recurcive-test-widget'
ERROR in ./src/app/form-generator/test-widget/test-widget.component.ngfactory.js
Module not found: Error: Can't resolve 'json-schema-form' in '/Users/xxx/xxx/xxx/src/app/form-generator/test-widget'
ERROR in chunk main [initial]
[name].[chunkhash:20].js
/Users/xxx/xxx/xxx/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js??ref--17-0!/Users/xxx/xxx/xxx/node_modules/@ngtools/webpack/src/index.js!/Users/xxx/xxx/xxx/src/main.ts fb795d43c3239ca08ae66e0032f6b7c5
Unexpected token (133:27655)
|
|
| var AppModuleNgFactory = /*@__PURE__*/ /*@__PURE__*/ __WEBPACK_MODULE_REFERENCE__0_c9b5636d66__(__WEBPACK_MODULE_REFERENCE__436_4170704d6f64756c65__, [__WEBPACK_MODULE_REFERENCE__437_417070436f6d706f6e656e74__], function (_l) { return __WEBPACK_MODULE_REFERENCE__0_c9b56d6f64__([__WEBPACK_MODULE_REFERENCE__0_c9b56d7064__(512, __WEBPACK_MODULE_REFERENCE__0_436f6d706f6e656e74466163746f72795265736f6c766572__, __WEBPACK_MODULE_REFERENCE__0_c9b5436f646567656e436f6d706f6e656e74466163746f72795265736f6c766572__, [[8, [__WEBPACK_MODULE_REFERENCE__441_c9b5456d7074794f75746c6574436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__444_4e6762416c6572744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__450_4e6762546f6f6c74697057696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__455_4e676254797065616865616457696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__476_4e6762446174657069636b65724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__478_4e67624d6f64616c4261636b64726f704e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__482_4e67624d6f64616c57696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__485_4e6762506f706f76657257696e646f774e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__497_4d61744469616c6f67436f6e7461696e65724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__504_4d6174446174657069636b6572436f6e74656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__504_4d617443616c656e6461724865616465724e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__507_546f6f6c746970436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_4164645265666572656e6365436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_4f6e654f66436f6d706f6e656e744e67466163746f7279__, __WEBPACK_MODULE_REFERENCE__546_427574746f6e436f6d706f6e656e744e67466163746f7279__... and many many more.

Are you using this library in some application?
Can you help us a little bit with debugging / fixing this issue?

Thank you very much in advance @hamzahamidi .

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. ...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. When creating a list of strings/object which are extendable the key of the field is rendered and the extend button is hardly visible:

Expected behavior
Field property is not visible and button is more prominent

Screenshots

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

Can't use NoFrameworkModule without requiring flex-layout or angular/material

To Reproduce
Steps to reproduce the behavior:

1. Import NoFrameworkModule without angular/material

Expected behavior
To work without these dependencies.

Might be doing something wrong, but using the NoFrameworkModule I can't seem to get it to start without it throwing errors for flex-layout, material and cdk

Describe the bug
which template:

• MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. ...

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Log output covering before error and any error statements

Insert log hereCopy

Additional context
Add any other context about the problem here.

Detailed Description

Context

Possible Implementation

Describe the bug
No guide on how to make changes. (For example, if I need to make "arrays" not draggable, it is not available.)
which template:

• [ √] MaterialDesignFrameworkModule — Material Design
• Bootstrap3FrameworkModule — Bootstrap 3
• Bootstrap4FrameworkModule — Bootstrap 4
• NoFrameworkModule — plain HTML
• Other (please specify below)

Thanks for this exciting repo. It does all the expected work.

To get some insights, I can refer to the examples in the playground. But I am limited to not using the complete API.

For any feature, I need to refer most of the previous issues on angular2-json-schema-form's repo.

To disable/enable the form, I need to use 'defautWidgetOptions': { 'readonly': true }, as opposed the API, "formReadonly: true", which is available in the defaultFormOptions method of /lib/son-schema-form.service.ts file

Detailed Description
Please provide me, how to:

1. Add basic Validation on form fields. How to use patterns and validate the form field based on the pattern.
2. How to toggle the complete form to make it read-only and vice-versa.

Context

In the forms, basic validation is must for formatting fields like email, telephone, currency etc.,

This will reduce the hard work to include custom functions.

Possible Implementation
Please add the API usage documentation or point to one.

Thanks :)

• npm ==> Yarn
• Contribution guide