UNPKG

@ng-formworks/core

Version:

Angular ng-formworks - JSON Schema Form builder core

226 lines (225 loc) 11 kB
import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { ControlValueAccessor } from '@angular/forms'; import { Subscription } from 'rxjs'; import { JsonSchemaFormService } from './json-schema-form.service'; import * as i0 from "@angular/core"; export declare const JSON_SCHEMA_FORM_VALUE_ACCESSOR: any; /** * @module 'JsonSchemaFormComponent' - Angular JSON Schema Form * * Root module of the Angular JSON Schema Form client-side library, * an Angular library which generates an HTML form from a JSON schema * structured data model and/or a JSON Schema Form layout description. * * This library also validates input data by the user, using both validators on * individual controls to provide real-time feedback while the user is filling * out the form, and then validating the entire input against the schema when * the form is submitted to make sure the returned JSON data object is valid. * * This library is similar to, and mostly API compatible with: * * - JSON Schema Form's Angular Schema Form library for AngularJs * http://schemaform.io * http://schemaform.io/examples/bootstrap-example.html (examples) * * - Mozilla's react-jsonschema-form library for React * https://github.com/mozilla-services/react-jsonschema-form * https://mozilla-services.github.io/react-jsonschema-form (examples) * * - Joshfire's JSON Form library for jQuery * https://github.com/joshfire/jsonform * http://ulion.github.io/jsonform/playground (examples) * * This library depends on: * - Angular (obviously) https://angular.io * - lodash, JavaScript utility library https://github.com/lodash/lodash * - ajv, Another JSON Schema validator https://github.com/epoberezkin/ajv * * In addition, the Example Playground also depends on: * - brace, Browserified Ace editor http://thlorenz.github.io/brace */ export declare class JsonSchemaFormComponent implements ControlValueAccessor, OnChanges, OnInit, OnDestroy { private changeDetector; private frameworkLibrary; private widgetLibrary; jsf: JsonSchemaFormService; private unsubscribeOnActivateForm$; debugOutput: any; formValueSubscription: any; formInitialized: boolean; objectWrap: boolean; formValuesInput: string; previousInputs: { schema: any; layout: any[]; data: any; options: any; framework: any | string; widgets: any; form: any; model: any; JSONSchema: any; UISchema: any; formData: any; loadExternalAssets: boolean; debug: boolean; ajvOptions: any; }; readonly schema: import("@angular/core").InputSignal<any>; readonly layout: import("@angular/core").InputSignal<any[]>; readonly data: import("@angular/core").InputSignal<any>; readonly options: import("@angular/core").InputSignal<any>; readonly framework: import("@angular/core").InputSignal<any>; readonly widgets: import("@angular/core").InputSignal<any>; readonly form: import("@angular/core").InputSignal<any>; readonly model: import("@angular/core").InputSignal<any>; readonly JSONSchema: import("@angular/core").InputSignal<any>; readonly UISchema: import("@angular/core").InputSignal<any>; readonly formData: import("@angular/core").InputSignal<any>; readonly ngModel: import("@angular/core").InputSignal<any>; readonly language: import("@angular/core").InputSignal<string>; readonly loadExternalAssets: import("@angular/core").InputSignal<boolean>; readonly debug: import("@angular/core").InputSignal<boolean>; readonly theme: import("@angular/core").InputSignal<string>; readonly ajvOptions: import("@angular/core").InputSignal<any>; private ajvInstanceName; get value(): any; set value(value: any); readonly onChanges: import("@angular/core").OutputEmitterRef<any>; readonly onSubmit: import("@angular/core").OutputEmitterRef<any>; readonly isValid: import("@angular/core").OutputEmitterRef<boolean>; readonly validationErrors: import("@angular/core").OutputEmitterRef<any>; readonly formSchema: import("@angular/core").OutputEmitterRef<any>; readonly formLayout: import("@angular/core").OutputEmitterRef<any>; readonly dataChange: import("@angular/core").OutputEmitterRef<any>; readonly modelChange: import("@angular/core").OutputEmitterRef<any>; readonly formDataChange: import("@angular/core").OutputEmitterRef<any>; readonly ngModelChange: import("@angular/core").OutputEmitterRef<any>; onChange: Function; onTouched: Function; dataChangesSubs: Subscription; statusChangesSubs: Subscription; isValidChangesSubs: Subscription; validationErrorChangesSubs: Subscription; ngOnDestroy(): void; private getInputValue; private resetScriptsAndStyleSheets; private loadScripts; private loadStyleSheets; private loadAssets; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; writeValue(value: any): void; registerOnChange(fn: Function): void; registerOnTouched(fn: Function): void; setDisabledState(isDisabled: boolean): void; updateForm(): void; setFormValues(formValues: any, resetFirst?: boolean): void; submitForm(): void; /** * 'initializeForm' function * * - Update 'schema', 'layout', and 'formValues', from inputs. * * - Create 'schemaRefLibrary' and 'schemaRecursiveRefMap' * to resolve schema $ref links, including recursive $ref links. * * - Create 'dataRecursiveRefMap' to resolve recursive links in data * and corectly set output formats for recursively nested values. * * - Create 'layoutRefLibrary' and 'templateRefLibrary' to store * new layout nodes and formGroup elements to use when dynamically * adding form components to arrays and recursive $ref points. * * - Create 'dataMap' to map the data to the schema and template. * * - Create the master 'formGroupTemplate' then from it 'formGroup' * the Angular formGroup used to control the reactive form. */ initializeForm(initialData?: any): void; /** * 'initializeAjv' function * * Initialize ajv from 'ajvOptions' */ private initializeAjv; /** * 'initializeOptions' function * * Initialize 'options' (global form options) and set framework * Combine available inputs: * 1. options - recommended * 2. form.options - Single input style */ private initializeOptions; /** * 'initializeSchema' function * * Initialize 'schema' * Use first available input: * 1. schema - recommended / Angular Schema Form style * 2. form.schema - Single input / JSON Form style * 3. JSONSchema - React JSON Schema Form style * 4. form.JSONSchema - For testing single input React JSON Schema Forms * 5. form - For testing single schema-only inputs * * ... if no schema input found, the 'activateForm' function, below, * will make two additional attempts to build a schema * 6. If layout input - build schema from layout * 7. If data input - build schema from data */ private initializeSchema; /** * 'initializeData' function * * Initialize 'formValues' * defulat or previously submitted values used to populate form * Use first available input: * 1. data - recommended * 2. model - Angular Schema Form style * 3. form.value - JSON Form style * 4. form.data - Single input style * 5. formData - React JSON Schema Form style * 6. form.formData - For easier testing of React JSON Schema Forms * 7. (none) no data - initialize data from schema and layout defaults only */ private initializeData; /** * 'initializeLayout' function * * Initialize 'layout' * Use first available array input: * 1. layout - recommended * 2. form - Angular Schema Form style * 3. form.form - JSON Form style * 4. form.layout - Single input style * 5. (none) no layout - set default layout instead * (full layout will be built later from the schema) * * Also, if alternate layout formats are available, * import from 'UISchema' or 'customFormItems' * used for React JSON Schema Form and JSON Form API compatibility * Use first available input: * 1. UISchema - React JSON Schema Form style * 2. form.UISchema - For testing single input React JSON Schema Forms * 2. form.customFormItems - JSON Form style * 3. (none) no input - don't import */ private initializeLayout; /** * 'activateForm' function * * ...continued from 'initializeSchema' function, above * If 'schema' has not been initialized (i.e. no schema input found) * 6. If layout input - build schema from layout input * 7. If data input - build schema from data input * * Create final layout, * build the FormGroup template and the Angular FormGroup, * subscribe to changes, * and activate the form. */ private activateForm; static ɵfac: i0.ɵɵFactoryDeclaration<JsonSchemaFormComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<JsonSchemaFormComponent, "json-schema-form", never, { "schema": { "alias": "schema"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "framework": { "alias": "framework"; "required": false; "isSignal": true; }; "widgets": { "alias": "widgets"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "JSONSchema": { "alias": "JSONSchema"; "required": false; "isSignal": true; }; "UISchema": { "alias": "UISchema"; "required": false; "isSignal": true; }; "formData": { "alias": "formData"; "required": false; "isSignal": true; }; "ngModel": { "alias": "ngModel"; "required": false; "isSignal": true; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "loadExternalAssets": { "alias": "loadExternalAssets"; "required": false; "isSignal": true; }; "debug": { "alias": "debug"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "ajvOptions": { "alias": "ajvOptions"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; }; }, { "onChanges": "onChanges"; "onSubmit": "onSubmit"; "isValid": "isValid"; "validationErrors": "validationErrors"; "formSchema": "formSchema"; "formLayout": "formLayout"; "dataChange": "dataChange"; "modelChange": "modelChange"; "formDataChange": "formDataChange"; "ngModelChange": "ngModelChange"; }, never, never, false, never>; }