Forms

Mongez manages forms in a well rounded mode to make it easier to use forms.

Highlighted Features

Here are some of highlighted features for using forms in Mongez rather than other popular packages.

• Form input values can be serialized into objects.
• Disabled Browser default behavior of validation for better User Experience.
• Form input values can be serialized into query string.
• Dot Notiation syntax for names.
• Ready components for usage for all types of inputs more than 30 components.
• Multilingual inputs support with single component.
• Form Context to handle nested components data from the Form.
• Powerful Validation System with more than 10 validation rules.
• Extensible Validation Rules Base to add new custom rules.
• No weird syntax, your inputs are written as-like normal html tags and attributes.

Qucik Example

RegisterPage.tsx

import { Form, EmailInput, PasswordInput, TextInput, SubmitButton } from 'mongez/form';import registerService from './../services/register'; // some sudo ajax service
export default function ReisterPage() {    const createAccount = (e, form) => {        registerService(e.target).then(response => {            // success response        }).catch(error => {
        }).finall(() => {            // disable form submission mode            form.submitting(false);        });    };
    return (        <Form onSubmit={createAccount}>            <EmailInput name="email" label="Email Address" placeholder="Add your email address" required />            <PasswordInput id="pass-input" minLength={8} name="password" label="Password" placeholder="Your password must be strong" required />            <PasswordInput match="pass-input" name="password_confirm" label="Confirm Password" placeholder="Your password must be strong" />            <SubmitButton>Create New Account</SubmitButton>        </Form>    );}

The previous example can be illustrated in the following notes:

• The form will not be submitted until all inputs are valid.
• The EmailInput will make sure the written text must be a valid email address and it can not be empty.
• The EmailInput will make sure the written text must be a valid email address and it can not be empty.
• The Second PasswordInput will make sure the written text matches the first password input using the match prop.

Note the original password must have a unqiue id prop for proper matching.