search

adampenn / Angular7-json-schema-form

Angular v7 for Angular2-json-schema-form
MIT License
5 stars 7 forks source link

TypeError in flex layout #2

Closed woutervs closed 5 years ago

woutervs commented 5 years ago

Describe the bug which template:

MaterialDesignFrameworkModule — Material Design

A clear and concise description of what the bug is.

image

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

woutervs commented 5 years ago

Seems to be a problem in flex.es5.js when a function gets called with a null gapValue. To resolve it I added the following code to 'flex-layout-section.component.ts': this.options.fxLayoutGap = this.options.fxLayoutGap !== null ? this.options.fxLayoutGap : "0px"; in the ngOnInit() function right below this.options = this.layoutNode.options || {};

bogdan-ardeleanu commented 5 years ago

The issue seems to be very annoying for anyone who wants to integrate the current npm published version (1.0.4). Can you try to push a fix for this issue into a new release version (let's say 1.0.5?)

material renderer issue

woutervs commented 5 years ago

I've gone back to angular6-json-schema-form there seems to be more support there and it's upgraded for angular 7 as well.

The problem is there as well but we've figured out it's in the flexlayout package from angular, going back to using 7.0.0-beta.19 fixes it. See https://github.com/angular/flex-layout/issues/1011