Ms React Reactive Form

an implementation of the Reactive Form concept in React, supporting Javascript and Typescript with Full support for Functioal and Class Components

Features

• Useing FormGroup, FormControl, Validators
• Initialize Form with a little amount of coding
• Having BaseValidator to return error type for each Input with its own Validity and Form Validity with Submission Status
• Having SetValidators and RemoveValidators to change Input Roles in runtime
• Compatiable with Javascript and Typescript
• Compatiable with Functional and Class Components =

Full Example

Full Example in https://github.com/EgAlexDeveloper/Ms-React-Reactive-Form please check the Js and Ts branches

Teck

• [React JS] - built for React Java script applications
• [React TS] - built for React Type script applications
• [Typescript] - the plugin build in Typrscript and transpilied to Javascript

Installation

Install the dependencies and devDependencies and start the server.

yarn add ms-react-reactive-form
npm i ms-react-reactive-form

Typescript Examples

Funtional Component

    // init FormGroup
    const form: FormGroup = new FormGroup({
        password: new FormControl("", [Validators.required(), Validators.pattern(/[0-9]/)])
    });
    
    // Store Form in State
    const [passwordForm, updatePasswordForm] = useState<FormGroup>(form);
    
    // Form Submit
    const save = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        
        // Call Reactive Form Base Validator
        let validate = new BaseValidator(passwordForm);
        // Process validation
        validate.analysis()
            .then(controls => {
                // Fetch Final Validation Results
                let res = validate.result(controls);
                
                // update form state must be called here
    
                // handel success submittion
                if (res.form.validity) {
                    console.log(res.payload);
                } else {
                    // handel failed submittion
                    console.log(res.form)
                }
            });
    };
    
    // Update Form Values
    const changeHandler = (event: FormEvent<HTMLInputElement>) => {
        const { name, value } = event.currentTarget;
        passwordForm.controls[name].setValue(value);
        // update form state must be called here
    };

    // Reset Password Value
    resetPassword = () => {
        passwordForm.controls[Control Name].setValue("");
        // Update Form State Here
    };
    
    // remove Validators
    const removePasswordValidators = () => {
        passwordForm.controls[Control Name].removeValidators([List of Validators]);
        // update form state must be called here
    };
    
    // Set Validators
    const setPasswordValidators = () => {
        passwordForm.controls[Control Name].setValidators([List of Validators]);
        // update form state must be called here
    };
    
    return (
        <form onSubmit={save}>
            <div>
                <input
                    name="password"
                    id="password"
                    placeholder="password"
                    value={loginForm.controls.password.value}
                    onChange={(event: FormEvent<HTMLInputElement>) => changeHandler(event)}
                />

                {
                    passwordForm.controls.password.validity === false &&
                    <span>
                        {
                            passwordForm.controls.password.errors.required &&
                            <span>Password is Required</span>
                        }

                        {
                            passwordForm.controls.password.errors.pattern &&
                            <span>Password pattern error</span>
                        }
                    </span>
                }
            </div>
        </form>
    )

Class Component

    state = {
        passwordForm: new FormGroup({
            password: new FormControl("", [Validators.required(), Validators.pattern(/[0-9]/)])
        })
    };
    
    save = (event: FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        const { passwordForm } = this.state;

        let validate = new BaseValidator(passwordForm);
        validate.analysis()
            .then(controls => {
                let res = validate.result(controls);
                // Update Form State Here

                if (res.form.validity) {
                    console.log(res.payload);
                } else {
                    console.log(res.form)
                }
            });
    };
    
    changeHandler = (event: FormEvent<HTMLInputElement>) => {
        const { passwordForm } = this.state;
        const { name, value } = event.currentTarget;
        loginForm.controls[name].setValue(value);

        // Update Form State Here
    };
    
    resetPassword = () => {
        const { passwordForm } = this.state;
        passwordForm.controls[Control Name].setValue("");
        // Update Form State Here
    };
    
    removePasswordValidators = () => {
        const { loginForm } = this.state;
        passwordForm.controls[Control Name].removeValidators([Validators.min, Validators.max, Validators.required()]);
        // Update Form State Here
    };

    setPasswordValidators = () => {
        const { loginForm } = this.state;
        passwordForm.controls[Control Name].setValidators([Validators.required()]);
        // Update Form State Here
    };
    
    render() {
        const { passwordForm: { controls } } = this.state;
        
        return (
            <form onSubmit={this.save}>
                <h1>Class Form</h1>
                <div>
                    <input
                        name="password"
                        id="password"
                        placeholder="password"
                        value={controls.password.value}
                        onChange={this.changeHandler}
                    />

                    {
                        controls.password.validity === false &&
                        <span>
                            {
                                controls.password.errors.required &&
                                <span>Password is Required</span>
                            }

                            {
                                controls.password.errors.pattern &&
                                <span>Password pattern error</span>
                            }
                        </span>
                    }
                </div>
            )
        }

Name	Description
FormGroup	to create Form Group containing all Controls
FormControl	to create Form Control containing all Input Methods and roles
Validators	require, min, max, minLength, maxLength, pattern
BaseValidators	analysis, result to return validations
removeValidators	take list of not needed validators
setValidators	take list of needed validators

License

MIT