Bootstrap - 4 framework causing issues in template using ngx-boostrap

Issue type

I’m submitting a (check one): [x] Bug report [ ] Feature request [ ] Regression (something that used to work, but stopped working in a newer version) [x] Support request [x] 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) [x] Search GitHub for a similar issue or PR [x] If submitting a Support request, also search Stack Overflow for similar issues Note: Please cross-post GitHub support requests to Stack Overflow, and include a link in your GitHub issue to your Stack Overflow question. We do currently respond to support requests on GitHub, but we eventually expect to stop, and will then refer all support questions exclusively to Stack Overflow.

Current behavior

When using the Bootstrap - 4 framework there seems to be some conflict with my Gradient Able template, When typing into any input box the whole screen flickers. I narrowed it down to a conflict between the bootstrap 4 css and the template’s ngx-bootrstrap css.

Commenting out the stylesheets from angular2-json-schema-form.es5.js resolved the problem

'bootstrap-4': { framework: Bootstrap4FrameworkComponent, stylesheets: [ <!-- removed the styles here --> ], scripts: [ '//code.jquery.com/jquery-3.2.1.slim.min.js', '//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js', , ], }

I also set load external assets to false

<json-schema-form framework="bootstrap-4" loadExternalAssets="false" [schema]="formSchema" [model]="formModel" [layout]="formLayout" (onSubmit)="submit($event)" [(model)]="formData"> </json-schema-form>

How do I create my own custom framework to avoid modifying anything in the node_modules/angular4-json-schema-form folder

Expected behavior

IMPORTANT: How can we reproduce your problem?

You can checkout my repo at https://github.com/neil-coutinho/qdemo.git

You can view my sandbox at http://localhost:4200/schema

Environment

OS name & version: Browser name & version: Angular version: Angular JSON Schema Form version(s): Other relevant software or packages:

Any other relevant information

[neil-coutinho]

@lucasgranberg

Putting square brackets around loadExternalAssets resolved the issue.

<json-schema-form framework="bootstrap-4" [loadExternalAssets]="false" [schema]="formSchema" (onSubmit)="submit($event)"> </json-schema-form>

[rmayuri]

@neil-coutinho HI, I am using bootstrap4module framework, the form is getting loaded but I am not able to read the form values, could you please provide any example to read the values and applying css. below are my fiels for your reference,

login.component.ts import { Component } from ‘’; @component({ selector: ‘app-login’, templateUrl: ‘./login.component.html’, styleUrls: [‘./login.component.css’] })

export class LoginComponent { title = ‘Optum Navigator’; mySchema = { “properties”: { “msid”: { “type”: “string”, “required”:true, “htmlClass”: “mystyle”, }, “password”: { “type”: “string”, “widget”: “password”, “required”:true }, } }; myform = { “form”: [ “msid”, “password”, { “type”: “submit”, “name”: “btnSubmit”, “title”: “Login”,

} ] }; public OnSubmitFn(event:any){ console.log(“login”+event); } }

login.component.html <json-schema-form loadExternalAssets=“true” [schema]=“mySchema”
[form]="myform " (onSubmit)=“OnSubmitFn($event)” >
</json-schema-form>

login.component.css

.mystyle {
    border: 2px solid red;
    border-radius: 4px;
}

Thanks in advance.