✨ useFormik Composable

The useFormik composable is your ultimate ally for managing complex forms in Vue 3 applications. With its simplicity and efficiency, it provides:

• ⚡ Reactive state management
• ✅ Schema-based validation (supporting libraries like Yup)
• 🚀 Streamlined form submission handling

With useFormik, you can effortlessly create dynamic, user-friendly forms that deliver a robust and consistent user experience.

🛠️ Parameters

🔗 Notes:

The validation schema can be supplied as yupSchema, joiSchema, zodSchema or validationSchema parameters.

If any of the schema parameters are not provided, the form will not perform any validation.

Please use Object schemas for Yup and Joi and not the string schemas.

🏗️ Properties

🔗 Notes:

1. Reactivity: Values, errors, and touched objects are fully reactive, enabling two-way data binding with form fields.
2. Computed properties: isValid & isDirty are computed properties. Don't forget to use .value while accessing it inside the template.

⚙️ Methods

🌟 Dynamic Fields:

1. setFieldValue: Dynamically update specific field values.
2. setFieldTouched: Dynamically update the touched state of specific fields.
3. ⚠️ setFieldError: This method is NOT available. Errors are handled internally through validation rules in the schema.

🔍 Custom Validation

You can define custom validation rules using the validationSchema parameter. These rules can validate simple fields, arrays, objects, or even arrays of objects.

Example

const initialValues = {
  email: "",
  password: "",
  confirmPassword: "",
}
const validationSchema = {
  email: (value: string) => {
    if (!value) {
      return "Email is required";
    }
    if (!isEmail(value)) {
      return "Invalid email";
    }
  },
  password: (value: string) => {
    if (!value) {
      return "Password is required";
    }
    if (value.length < 8) {
      return "Password must be at least 8 characters";
    }
  },
  confirmPassword: (value: string) => {
    if (!value) {
      return "Confirm password is required";
    }
    if (value !== initialValues.password) {
      return "Passwords do not match";
    }
  },
}

The above example shows a validation schema for the email and password fields. - **Email** must be valid and is required. - **Password** must be at least 8 characters long and is required.

Validation schemas can be customized to handle simple fields or more complex structures, such as arrays or nested objects.

💡 My form values aren’t always strings

No worries! Validation rules can be written for arrays, objects, or even arrays of objects.

const initialValues = {
  email: [""],
}
const validationSchema = {
  email: (values: string[]) => {
    if (!values?.length) {
      return "Email is required";
    }
    const errs = [];
    values.forEach((value, index) => {
      if (!value) {
        errs.push("Email is required");
        return; // Skip further validation
      }
      if (!isEmail(value)) {
        errs.push("Invalid email");
      }
    });
  }
}

In the example above, the emails field is an array of email addresses. Each email is validated, and errors are displayed if any email is invalid.

For more complex validation rules, check out the playground section. 🔗