Skip to main content

Introduction

GitHub Licensenpm versionnpm minified sizenpm total downloads

🔥warning

WIP Package!

Simple Form Manager

multieditor

The multieditor package is an extension for AgileTs, that makes creating reliable forms easy.

⏰ Short Example

// Create Multieditior 
const multiEditor = createMultieditor(editor => ({
initialData: {
id: "myId", // Initial Id
email: undefined, // Inital Email
name: undefined, // Inital Name
},
onSubmit: async (data) => {
console.log("Submitted ", data); // <---------
}, // |
// Properties that are always passed to the 'onSubmit()' method
fixedProperties: ["id"],
validationSchema: {
// Validation with inbuilt tree shakable validation methods
email: agileResolver(isString, isEmail, isRequired),
// Validation with external validatiors like Yup
name: yupResolver(Yup.string().required().max(10).min(2)),
}
}));

// Use the Multieditor in any UI-Form
// ..
<label>First Name:</label>
<input
onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
defaultValue={signUpEditor.getItemInitialValue("firstName")}
/>
<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
// ..

// Submit Multieditor and see what the 'onSubmit()' method will log
multiEditor.submit();
// Submited {
// id: "myId",
// name: "Jeff",
// email: "test@test.com"
// }

⛳️ Sandbox

Test the Multieditor yourself. It's only one click away. Just select your preferred Framework below.