Form

Documentation

JavaScript

var Components = require("gd-sprest-bs").Components;

// Create the form
var el = document.querySelector("#myForm");
Components.Form({
    el: el,
    rows: [
        {
            control: {
                label: "First Name:",
                name: "FName",
                type: 10
            }
        },
        {
            control: {
                label: "Last Name:",
                name: "LName",
                type: 10
            }
        },
        {
            control: {
                label: "Choices:",
                name: "Choice",
                type: 3,
                items: [
                    { text: "Choice 1", value: "1" },
                    { text: "Choice 2", value: "2" },
                    { text: "Choice 3", value: "3" },
                    { text: "Choice 4", value: "4" },
                    { text: "Choice 5", value: "5" }
                ]
            }
        }
    ],
    value: {
        FName: "Gunjan",
        LName: "Datta",
        Choice: "3"
    }
});

TypeScript

import { Components } from "gd-sprest-bs";

// Create the form
let el = document.querySelector("#myForm");
let form = Components.Form({
    el: el,
    rows: [
        {
            control: {
                label: "First Name:",
                name: "FName",
                type: 10
            }
        },
        {
            control: {
                label: "Last Name:",
                name: "LName",
                type: 10
            }
        },
        {
            control: {
                label: "Choices:",
                name: "Choice",
                type: 3,
                items: [
                    { text: "Choice 1", value: "1" },
                    { text: "Choice 2", value: "2" },
                    { text: "Choice 3", value: "3" },
                    { text: "Choice 4", value: "4" },
                    { text: "Choice 5", value: "5" }
                ]
            }
        }
    ],
    value: {
        FName: "Gunjan",
        LName: "Datta",
        Choice: "3"
    }
});

Web Component

// Return the form properties return { rows: [ { control: { label: "First Name:", name: "FName", type: 10 } }, { control: { label: "Last Name:", name: "LName", type: 10 } }, { control: { label: "Choices:", name: "Choice", type: 3, items: [ { text: "Choice 1", value: "1" }, { text: "Choice 2", value: "2" }, { text: "Choice 3", value: "3" }, { text: "Choice 4", value: "4" }, { text: "Choice 5", value: "5" } ] } } ], value: { FName: "Gunjan", LName: "Datta", Choice: "3" } };
<script type="text/javascript" src="https://unpkg.com/gd-sprest-bs/wc/dist/gd-sprest-bs.js"></script>
<bs-form>
    // Return the form properties
    return {
        rows: [
            {
                control: {
                    label: "First Name:",
                    name: "FName",
                    type: 10
                }
            },
            {
                control: {
                    label: "Last Name:",
                    name: "LName",
                    type: 10
                }
            },
            {
                control: {
                    label: "Choices:",
                    name: "Choice",
                    type: 3,
                    items: [
                        { text: "Choice 1", value: "1" },
                        { text: "Choice 2", value: "2" },
                        { text: "Choice 3", value: "3" },
                        { text: "Choice 4", value: "4" },
                        { text: "Choice 5", value: "5" }
                    ]
                }
            }
        ],
        value: {
            FName: "Gunjan",
            LName: "Datta",
            Choice: "3"
        }
    };
</bs-form>

References

Form(props:IFormProps):IForm

FormControlTypes

Name Value
CheckBox 1
Email 2
Dropdown 3
File 4
MultDropdown 5
Password 6
Radio 7
Range 8
Readonly 9
TextArea 10
TextField 11

IForm

Name Returns Description
el Element The jquery element.
getValues {[key:string]: any} The form values, where the key is equal to the ‘name’ property.

IFormProps

Name Type Description
el HTMLElement The element to render the form to.
rows Array<IFormRow> An array of form rows.
value any The form values.

IFormRow

Name Type Description
isAutoSized boolean Sets the ‘col’ class name to ‘col-auto’.
isCentered boolean Adds the ‘align-items-center’ class.
control Array<IFormControlProps> The form control.
columns Array<{ control: IFormControlProps, size: number }> The form values.

Form Controls

IFormControl

Name Type Description
el HTMLElement The element to render the form control to.
getValue any The form control value.
isValid () => boolean | IFormControlValidationResult Flag determining if the control is valid. This will also apply the is-valid and is-invalid class to the form-control.
props IFormControlProps A reference to the form control properties.

IFormControlProps

Name Type Description
className string The class name to apply to form control.
data any The form control data object associated with the control.
description string The form control description.
el HTMLElement The element to render the form control to.
errorMessage string Adds an invalid-feedback element to the form control.
isReadonly boolean Flag to set the form control to be read-only.
isPlainText boolean Flag to set the form control as plain text.
label string The form control label.
name string The form control name.
onControlRendering (control: IFormControlProps) => void | PromiseLike<IFormControlProps> The form control on rendering event.
onControlRendered (control: IFormControl) => void | PromiseLike<IFormControlProps> The form control on rendered event.
onRendered (controls: Array<IFormControl>) => void Event triggered when all controls have been rendered. Note - If a promise is returned from the onControlRendering event, this event will be triggered after the promise is resolved.
onGetValue (control: IFormControlProps) => any The form control on rendering event.
required boolean The required form control flag.
type number The form control type. Reference the FormControlTypes enumerator
value any The form control value.

IFormControlCheckbox

Name Type Description
hideLabel boolean Flag to hide the checkbox label.
items Array<ICheckboxItem> An array of dropdown items.
multi boolean Flag to allow multiple selections.
onChange (item: IDropdownItem | Array<IDropdownItem>) => void The change event.
type number The checkbox type.

IFormControlDropdown

Name Type Description
items Array<IDropdownItem> An array of dropdown items.
onChange (item: IDropdownItem | Array<IDropdownItem>) => void The change event.
placeholder string The dropdown placeholder.
type number The dropdown type. Reference the DropdownTypes enumerator

IFormControlTextField

Name Type Description
onChange (value: string) => void The change event.
placeholder string The text field placeholder.

IFormControlValidationResult

Name Type Description
invalidMessage string Message displayed when the control is not valid.
isValid boolean Flag determining if the control is valid or not.
validMessage string Message displayed when the control is valid.