hamzahamidi / ajsf Goto Github PK
View Code? Open in Web Editor NEWAngular JSON Schema Form
Home Page: https://hamzahamidi.github.io/ajsf
License: MIT License
Angular JSON Schema Form
Home Page: https://hamzahamidi.github.io/ajsf
License: MIT License
which template:
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?
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 .
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
To have no errors at serving the app.
Desktop (please complete the following information):
Describe the bug
which template:
"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):
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
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):
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:
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:
ng new testAngular
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"
}
}
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 { }
<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):
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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:
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
Describe the bug
which template:
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
Which template:
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:
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):
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Field property is not visible and button is more prominent
Screenshots
Describe the bug
which template:
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):
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
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:
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.
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):
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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?
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
which template:
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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
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:
(does not seem to depend on the template)
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
"schema": {
"type": "object",
"properties": {
"name": {
"type": "object",
"properties": {
"sub-name": {
"type": "string"
}
}
},
"other": {
"type": "string"
}
}
},
"layout": [
"*"
]
}
It works as intended
"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.
Desktop (please complete the following information):
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
which template:
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:
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):
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.
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
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.
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/
Describe the bug
which template:
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:
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:
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):
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
{
"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):
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Disabled mode for submit button with custom text while required fields are empty
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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?
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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:
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
No guide on how to make changes. (For example, if I need to make "arrays" not draggable, it is not available.)
which template:
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:
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 :)
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
{ "key": "birthday", "type": "date","minimum":"2018-12-04" }
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):
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
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.
Describe the bug
which template:
Can't use NoFrameworkModule without requiring flex-layout or angular/material
To Reproduce
Steps to reproduce the behavior:
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:
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
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.
Describe the bug
which template:
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.
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:
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):
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
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.
Describe the bug
which template:
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):
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The changing of input values need to be smooth
Desktop (please complete the following information):
Describe the bug
which template:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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
Can't resolve an external local file reference in $ref.
Is there any solution to use local external schema file reference in $ref.
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):
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Desktop (please complete the following information):
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:
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
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):
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
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
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)
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.