@ng-formworks/core
Version:
Angular ng-formworks - JSON Schema Form builder core
226 lines (225 loc) • 11 kB
TypeScript
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>;
}