final-form-set-errors-mutator - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

		{
		"name": "final-form-set-errors-mutator",
		"version": "1.0.1",
		"version": "1.0.2",
		"description": "Mutator for setting errors outside of form (for example in redux-saga)",
		@@ -5,0 +5,0 @@ "contributors": [

README.md

		# final-form-set-errors-mutator
		Mutator for setting errors outside of form (for example in redux-saga)
		Mutator for setting form errors.

		It allows you validate your form values outside of form (for example in redux-saga).

		@@ -14,4 +16,4 @@ # Installation
		```tsx
		import { FormApi, FormSubscription } from "final-form";
		import React, { FunctionComponent, useState, ChangeEvent } from "react";
		import { FormApi } from "final-form";
		import React, { FunctionComponent } from "react";
		import { Form, Field } from "react-final-form";
		@@ -21,55 +23,18 @@ import { setErrors } from "final-form-set-errors-mutator";

		export interface IMyFormProps {
		submit: (form: any) => void;
		interface PasswordModel {
		password: string;
		confirmPassword: string;
		}

		type Props = IMyFormProps;
		interface IMyFormProps {
		submit: (model: PasswordModel, formApi: FormApi) => void;
		}

		const MyForm: FunctionComponent<Props> = (props) => {
		const [ formApi, setFormApi ] = useState<FormApi>(null);

		const formSubscription: FormSubscription = {
		submitting: true,
		};

		const [ password, setPassword ] = useState<string>("");
		const [ confirmPassword, setConfirmPassword ] = useState<string>("");

		const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => {
		const modelState = new ModelState();
		if (event.target.value !== confirmPassword) {
		modelState.addError(
		"confirm-password",
		"Passwords are not equals."
		);
		}
		setPassword(event.target.value);

		formApi.mutators.setErrors(modelState);
		};

		const handleChangeConfirmPassword = (event: ChangeEvent<HTMLInputElement>) => {
		const modelState = new ModelState();
		if (password !== event.target.value) {
		modelState.addError(
		"confirm-password",
		"Passwords are not equals."
		);
		}
		setConfirmPassword(event.target.value);

		formApi.mutators.setErrors(modelState);
		};

		const MyForm: FunctionComponent<IMyFormProps> = ({ submit }) => {
		return (
		<Form
		onSubmit={props.submit}
		subscription={formSubscription}
		mutators={[
		setErrors,
		]}
		onSubmit={submit}
		mutators={[ setErrors ]}
		>
		{({ handleSubmit, form }) => {
		setFormApi(form);

		{({ handleSubmit }) => {
		return (
		@@ -81,3 +46,3 @@ <form onSubmit={handleSubmit}>
		<label>Password</label>
		<input {...input} type="text" placeholder="Password" onChange={handleChangePassword}/>
		<input {...input} type="password"/>
		{meta.error && meta.touched && <span>{meta.error}</span>}
		@@ -87,7 +52,8 @@ </div>
		</Field>
		<Field name="confirm-password">

		<Field name="confirmPassword">
		{({ input, meta }) => (
		<div>
		<label>Confirm your password</label>
		<input {...input} type="password" placeholder="Confirm password" onChange={handleChangeConfirmPassword}/>
		<input {...input} type="password"/>
		{meta.error && meta.touched && <span>{meta.error}</span>}
		@@ -104,3 +70,23 @@ </div>

		export { MyForm };

		function* mySaga(action) {
		const { model, formApi } = action.payload;

		const modelState = validate(model);
		formApi.mutators.setErrors(modelState);
		if (modelState.isValid()) {
		// api request or something else
		}
		}

		function validate(model: PasswordModel): ModelState {
		const modelState = new ModelState();
		if (model.password !== model.confirmPassword) {
		modelState.addError(
		"confirmPassword",
		"Passwords are not equals."
		);
		}
		return modelState;
		}
		```

final-form-set-errors-mutator - npm Package Compare versions

New alerts

Fixed alerts

Worsened metrics