Properties

NameTypeDefault
padding FormPadding { left: 5, top: 5, right: 5, bottom: 5 }
Interface FormPadding {
  left?: number | string;
  right?: number | string;
  top?: number | string;
  bottom?: number | string;
}

Gets or sets the jqxForm's padding. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value} padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
backgroundColor string #F5F5F5
Gets or sets the jqxForm's backgroundColor. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value} backgroundColor={'lightblue'}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
borderColor string #E5E5E5
Gets or sets the jqxForm's borderColor. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value} borderColor={'red'}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value any {}
Gets or sets the jqxForm's value. 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
template Array<FormTemplateItem> undefined
Interface FormPadding {
  left?: number | string;
  right?: number | string;
  top?: number | string;
  bottom?: number | string;
}

Interface FormTemplateItem {
  type?: string;
  bind?: string;
  submit?: boolean;
  required?: boolean;
  requiredPosition?: string;
  info?: string;
  infoPosition?: string;
  component?: string;
  init?: (value: any) => void;
  label?: string;
  labelPosition?: string;
  labelAlign?: string;
  align?: string;
  valign?: string;
  labelValign?: string;
  height?: number | string;
  rowHeight?: number | string;
  width?: number | string;
  columnWidth?: number | string;
  labelWidth?: number | string;
  labelHeight?: number | string;
  padding?: FormPadding;
  labelPadding?: FormPadding;
  columns?: Array<FormTemplateItem>;
  optionsLayout?: string;
  options?: Array<any>;
}

Gets or sets the jqxForm's template. Each object in the template, represents a Form row. Each row can have one field with label or multiple fields(if the current object's columns property is defined).

Template options:

  • bind - Sets a template's member Name.
  • type - Sets a template member's type. Possible values: 'text', 'option', 'blank', 'button', 'color', 'number', 'boolean', 'password', 'label', 'time', 'date', 'datetime', 'custom'.
  • label - Sets the label displayed next to the field.
  • labelWidth - Sets the with o label displayed next to the field.
  • required - Sets whether the field is optional or not.
  • info - Sets the field information icon's tooltip.
  • infoPosition - Sets the information icon's position.
  • component - Sets the component's type. 'jqxDropDownList' when type is 'option'. By default, the component type is jqxRadioButton for the 'option' type.
  • options - Sets the 'option' type's options.
  • init - Sets the callback function for 'custom' type initialization.
  • rowHeight - Sets the row's height.
  • width - Sets the row's width.
  • columns - Sets the row's columns.
  • align - Sets the alignment of the field. Possible values: 'right', 'center', 'left'
  • valign - Sets the vertical alignment of the field. Possible values: 'top', 'center', 'bottom'
  • columnWidth - Sets the column's width.
 const template = [ { bind: 'firstName', type: 'text', label: 'First name', required: true, labelWidth: '80px', width: '250px', info: 'Enter first name', infoPosition: 'right' }, { bind: 'lastName', type: 'text', label: 'Last name', required: true, labelWidth: '80px', width: '250px', info: 'Enter last name' }, { bind: 'company', type: 'text', label: 'Company', required: false, labelWidth: '80px', width: '250px' }, { bind: 'address', type: 'text', label: 'Address', required: true, labelWidth: '80px', width: '250px' }, { bind: 'city', type: 'text', label: 'City', required: true, labelWidth: '80px', width: '250px' }, { bind: 'state', type: 'option', label: 'State', required: true, labelWidth: '80px', width: '250px', component: 'jqxDropDownList', options: [ { value: 'California' }, { value: 'New York'}, { value: 'Oregon'}, { value: 'Illinois'}, { value: 'Texas'} ] }, { bind: 'zip', type: 'text', label: 'Zip code', required: true, labelWidth: '80px', width: '250px' }, { type: 'blank', rowHeight: '10px' }, { columns: [ { type: 'button', text: 'Sign up', width: '90px', height: '30px', rowHeight: '40px', columnWidth: '50%', align: 'right' }, { type: 'button', text: 'Cancel', width: '90px', height: '30px', rowHeight: '40px', columnWidth: '50%' } ] } ]; var sampleValue = { firstName: 'John', lastName: 'Scott', address: '1st Ave SW', company: 'N/A', city: 'San Antonio', state: 'Texas', zip: '78209' }; $('#sampleForm').jqxForm({ template: template, value: sampleValue, backgroundColor: '#fafafa', padding: { left: 10, top: 10, right: 10, bottom: 10 } }); 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

formDataChange Event

Event: formDataChange

Code examples

Bind to the formDataChange event of jqxForm. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm} onFormDataChange={this.onFormDataChange}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
 
  private onFormDataChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
buttonClick Event

Event: buttonClick

Code examples

Bind to the buttonClick event of jqxForm. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
  
  public render() {
    return (
      <JqxForm ref={this.myForm} onButtonClick={this.onButtonClick}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
 
  private onButtonClick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
getInstance

Method: getInstance

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
 
  public componentDidMount(): void {
    this.myForm.current!.getInstance();
  }
   
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh
Refreshes the Form Component 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
 
  public componentDidMount(): void {
    this.myForm.current!.refresh();
  }
   
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
destroy
Destroys the Form Component 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
 
  public componentDidMount(): void {
    this.myForm.current!.destroy();
  }
   
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
hideComponent name
Hides a form element component from the list specified in the template .
showComponent name
Shows a hidden form element component from the list specified in the template .
val value

Sets or gets the value of the object to bind to the form.

submit action, target, method

Submits the form.

getComponentByName name

Gets a form input element by name. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
 
class App extends React.PureComponent<{}, IFormProps> {
  private myForm = React.createRef<JqxForm>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        template:
        [{
            bind: 'textBoxValue',
            type: 'text',
            label: 'Text input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'passwordBoxValue',
            type: 'password',
            label: 'Password input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            bind: 'numberBoxValue',
            type: 'number',
            label: 'Number input',
            labelPosition: 'left',
            labelWidth: '30%',
            align: 'left',
            width: '250px',
            required: true
        },
        {
            name: 'submitButton',
            type: 'button',
            text: 'Submit Form Data',
            align: 'right',
            padding: { left: 0, top: 5, bottom: 5, right: 40 }
        }],
        value: {
            'textBoxValue': 'text box value',
            'passwordBoxValue': 'password box',
            'numberBoxValue': 67.44
        }
    }
  }
 
  public componentDidMount(): void {
    this.myForm.current!.getComponentByName('submitButton');
  }
   
  public render() {
    return (
      <JqxForm ref={this.myForm}  style={{ width: 450, height: 'auto' }}
        template={this.state.template} value={this.state.value}
      />
    );
  }
 
  private onButtonClick(event) {
  alert('Button Clicked...');
    }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);