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.