Form

less than 1 minute read

References

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: Components.FormControlTypes.TextField
            }
        },
        {
            control: {
                label: "Last Name:",
                name: "LName",
                type: Components.FormControlTypes.TextField
            }
        },
        {
            control: {
                label: "Choices:",
                name: "Choice",
                type: Components.FormControlTypes.Dropdown,
                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"
    }
});

React

import * as React from "react";
import { Components, Form } from "gd-sprest-bsx";

export class IDemo extends React.Component {
    // Render the component
    render() {
        return (
            <Form
                rows={[
                    {
                        columns: [
                            {
                                control: {
                                    label: "First Name:",
                                    name: "FName",
                                    type: Components.FormControlTypes.TextField
                                }
                            }
                        ]
                    },
                    {
                        columns: [
                            {
                                control: {
                                    label: "Last Name:",
                                    name: "LName",
                                    type: Components.FormControlTypes.TextField
                                }
                            }
                        ]
                    },
                    {
                        columns: [
                            {
                                control: {
                                    label: "Choices:",
                                    name: "Choice",
                                    type: Components.FormControlTypes.Dropdown,
                                    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 }
                                    ]
                                }
                            }
                        ]
                    }
                ]}
            />
        );
    }
}

Code Playground