Editor Form Control (v1.14.0+)

Example

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [{
            label: 'Current Address',
            control: T.EDBMasterFormControl.editor,
            path: 'current_address',
            editorSettings: {
                // formats: ['background', 'bold', 'color', 'font', 'code', 'italic', 'link', 'size', 'strike', 'script', 'underline', 'blockquote', 'header', 'indent', 'list', 'align', 'direction', 'code-block', 'image', 'video', 'clean'],
                style: {
                    height: '350px',
                }
            }
        }]
    }
};

Interface Documentation

export interface IDBMasterConfigFormField {
    /** It is used to find element. */
    hiddenId?: string;
    label?: string;

    /** This text will be displayed under control in small. HTML supported. */
    helpText?: string;

    /** database field name, UI control value will be saved on this property in save/update object. */
    path?: string;

    /** UI control type */
    control?: EDBMasterFormControl;

    /**
     * Default : col-lg mt-4 col-md-{ 12 / ((columns.length === 2 ? 4 : columns.length) / 2) } <br/>
     * It will be applied to parent div which holds UI control in it.
     * */
    cssClassDiv?: string;

    /** if true, that control will take focus automatically. */
    autofocus?: boolean;

    /** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
    disabled?: boolean | string;

    /** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
    visible?: boolean | string;

    /** Generates UI controls. */
    fields?: IDBMasterConfigFormField[][];

    validations?: Pick<IPropertyValidation, 'required'> & {
        /** If requiredFun is present, that code will be executed when form data is getting changed and it sets value in required.<br/>
         * Value of required will be ignored when requiredFun is present because system will evaluate "requiredFun" and it's output will be value of "required"
         * */
        requiredFun?: string;
    };
    validationErrors?: {
        required?: string;
    };

    editorSettings?: {
        /** Give style object in angular style. */
        style?: any;

        placeholder?: string;

        /** Maximum number of character allows in the input field. */
        maxLength?: number;

        /** Advisory information to display in a tooltip on hover. */
        tooltip?: string;

        /** Type of CSS position. */
        tooltipPosition?: 'left' | 'top' | 'bottom' | 'right';
        tooltipStyleClass?: string;

        /** Only those controls and formats will be allowed
         * ex: ['background', 'bold', 'color', 'font', 'code', 'italic', 'link', 'size', 'strike', 'script', 'underline', 'blockquote', 'header', 'indent', 'list', 'align', 'direction', 'code-block', 'image', 'video', 'clean']
         * */
        formats?: string[];

        jsCode?: {
            /**
             * Available variables:<br/>
             * formData: any = Entire form object<br/>
             * column: IDBMasterConfigFormField = Configuration of that form column. column.dropdownSettings?.dbData?.find will be query to get data. <br/>
             * allDropdownDataMap: {[path: string]: any[]} = Map of all dropdown data<br/>
             * globalData: any = User will send it using SET_GLOBAL_DATA_TO_USE_IN_ANY_SCRIPT event from parent. <br/>
             * utils: any = Common utility functions for user to use. <br/>
             * queryParams: any = Query params received from URL. <br/>
             * config: IDBMasterConfigFormField <br/>
             * event: any <br/>
             */
            appendTo: EDBMasterEditorAppendTo,
            /**
             * // dropdownData is available to use.
             *
             * // Return promise for long awaiting tasks.
             * new Promise(async (resolve, reject) => {
             *     await new Promise(r => setTimeout(r, 3000));
             *     dropdownData[0].name = 'Sample data';
             *     resolve();
             * });
             *
             * // Directly modify data of grid
             * dropdownData[0].name = 'Sample data';
             *
             * // Return function
             * (function setData() { dropdownData[0].name = 'Sample data'; } );
             *
             */
            code: string,
        }[],
    };

}


export interface IPropertyValidation {
    required?: boolean; // Allowed Types : *
    min?: number; // Allowed Types : number | date
    max?: number; // Allowed Types : number | date
    minLength?: number; // Allowed Types : string
    maxLength?: number; // Allowed Types : string
    unique?: boolean;
    email?: boolean; // Allowed Types : string
    validatorFun?: Function;

    /** If value is present it should be from this array. */
    enum?: any[];
}


export enum EDBMasterEditorAppendTo {
    visible = 'visible',
    disabled = 'disabled',
    ngModelChange = 'ngModelChange',
    onTextChange = 'onTextChange',
    onInit = 'onInit',
    onSelectionChange = 'onSelectionChange',
    focus = 'focus',
    blur = 'blur',
    keyUp = 'keyUp',
    keyDown = 'keyDown',
}


export enum EDBMasterFormControl {
    input = 'input',
    inputNumber = 'inputNumber',
    inputMask = 'inputMask',
    inputOtp = 'inputOtp',
    password = 'password',
    date_picker = 'date_picker',
    textarea = 'textarea',
    editor = 'editor',
    checkbox = 'checkbox',
    radio = 'radio',
    color_picker = 'color_picker',
    dropdown = 'dropdown',
    auto_complete = 'auto_complete',
    multi_select = 'multi_select',
    file_upload = 'file_upload',
    grid = 'grid',
    divider = 'divider',
    rating = 'rating',
    knob = 'knob',

    // Field holder controls
    accordion = 'accordion',
    tab_view = 'tab_view',

    // utility controls
    button = 'button',
    image = 'image',
    customHTML = 'customHTML',
}

export enum EDBMasterCustomActionButtonAppendTo {
    click = 'click',
}