Input Number Form Control

Example

let dbMasterConfig: T.IDBMasterConfig = {
    form: {
        fields: [
            [{
                label: 'Current CTC',
                control: T.EDBMasterFormControl.inputNumber,
                path: 'current_ctc',

                inputNumberSettings: {
                    mode: 'currency',
                    currency: 'INR',
                }
            }]
        ]
    }
};

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;

    path?: string;
    control: EDBMasterFormControl;

    /** 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;

    validations?: Pick<IPropertyValidation, 'required'>;
    validationErrors?: {
        required?: string;
    };

    /** Doc : https://primeng.org/inputnumber */
    inputNumberSettings?: {
        /** Give style object in angular style. */
        style?: any;

        /** custom CSS class to assign to control */
        cssClass?: string,

        placeholder?: string;
        min?: number;
        max?: number;
        minFractionDigits?: number;
        mode?: 'decimal' | 'currency' | '';

        /** The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided. */
        currency?: string;

        /** Default : 'en-US' */
        locale?: string;
        prefix?: string;
        suffix?: string;

        // buttons
        showButtons?: boolean;

        /** Default : stacked */
        buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
        step?: number;

        /** Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators. */
        useGrouping?: boolean;

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

        /** Minimum number of character allows in the input field. */
        minLength?: number;

        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: EDBMasterInputNumberAppendTo,
            /**
             * // 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,
        }[],

        validationErrors?: {
            minLength?: 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;
}


export enum EDBMasterInputNumberAppendTo {
    visible = 'visible',
    disabled = 'disabled',
    ngModelChange = 'ngModelChange',
    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',
    checkbox = 'checkbox',
    radio = 'radio',
    color_picker = 'color_picker',
    dropdown = 'dropdown',
    file_upload = 'file_upload',
    grid = 'grid',
    divider = 'divider',

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

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