This section explains how to migrate the Form validator component from EJ2 React to React. It provides a detailed comparison of APIs, including props, methods and events.
| EJ2 React | React | Description |
|---|
Props: rules const options = {
rules: {
'email': {
required: [true, '* Enter your email']
},
}
};
this.formObject = new FormValidator('#form1', options);
<form id='form1' method="post"></form> | Props: rules <Form rules={validationRules} > </Form | The rules prop is supported in both EJ2 React and React. |
Props: validateOnChange
Not applicable | Props: validateOnChange <Form
rules={validationRules}
validateOnChange={true}
> </Form> | Specifies whether to trigger validationOnChange on every input change. When true, validation occurs on each keystroke, providing immediate feedback in React. |
| EJ2 React | React | Description |
|---|
Methods: destroy <from id="from"
content="from"
ref={(scope) => {
this.fromObj = scope
} />
constructor(props: {}) {
this.fromObj.destroy();
}}
| useEffect(() => {
return () => {
console.log('destroyed');
};
}, []);
<Checkbox onChange={(e) => handleClose(e)}></Checkbox> | The destroyed callback event in EJ2 React is not available in React components. Instead, use the cleanup function returned by React useEffect hook to execute logic on component unmount. |
Methods: reset <from id="formId"
ref={(scope) => {
this.formObj = scope
} />
constructor(props: {}) {
this.formObj.reset();
}}
| <Form rules={validationRules}
ref={form => this.formInstance = form}>
<button className='sf-btn' onClick={() =>
this.formInstance.reset()}>Reset</button>
</Form>
| The reset() method is supported in both EJ2 React and React. |
Methods: validate <from id="formId"
ref={(scope) => {
this.formObj = scope
} />
constructor(props: {}) {
this.formObj.validate();
}}
| <Form rules={validationRules}
ref={form => this.formInstance = form}> </Form>
<button className='sf-btn' onClick={() =>
this.formInstance.validate()}>validate</button>
| The validate() method is supported in both EJ2 React and React. |
| EJ2 React | React | Description |
|---|
Event: submit <form submit={(e) => handleClose(e)}></form> | Event: onSubmit <Form onSubmit={(e) => handleClose(e)}></Form> | The submit event in EJ2 is renamed to onSubmit in React. |