an implementation of the Reactive Form concept in React, supporting Javascript and Typescript with Full support for Functioal and Class Components
- 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 in https://github.com/EgAlexDeveloper/Ms-React-Reactive-Form please check the Js and Ts branches
- [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
Install the dependencies and devDependencies and start the server.
yarn add ms-react-reactive-form
npm i ms-react-reactive-form
// 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>
)
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 |
MIT