Triển khai một biểu mẫu React Formik với hook useFormConfig.

Trong ví dụ này, chúng tôi sẽ trình bày cách triển khai một biểu mẫu React Formik sử dụng hook useFormConfig của OneEntry.

✅ Mục đích của kịch bản:

• Triển khai một biểu mẫu Formik sử dụng hook useFormConfig của OneEntry.
• Đảm bảo dữ liệu được định dạng và xác thực đúng trước khi gửi.

✅ Những gì bạn cần:

• Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với API của OneEntry.
• Một môi trường phát triển được thiết lập với React.js (ví dụ: Next.js, Create React App).
• Được cấu hình trong biểu mẫu liên hệ của giao diện OneEntry với dấu hiệu "contact_us".

📌 Quan trọng:

• Những ví dụ này không bao gồm xử lý lỗi.
• Bạn có thể quản lý lỗi bằng cách sử dụng khối try-catch hoặc bằng cách sử dụng cấu trúc như await Promise.catch((error) => error).
• Đảm bảo rằng dấu hiệu biểu mẫu (ví dụ: "contact_us") được sử dụng trong Forms.getFormByMarker khớp với một biểu mẫu hiện có trong dự án OneEntry của bạn.

Kịch bản

1. Nhập oneEntry và định nghĩa url và token

Ví dụ:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Tạo một client API với hàm defineOneEntry()

Ví dụ:

const { Forms } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

Lấy dữ liệu biểu mẫu từ oneentry

Ví dụ:

const formData = await Forms.getFormByMarker('contact_us');

Kết quả:

{
  "id": 3,
  "attributeSetId": 2,
  "type": "data",
  "localizeInfos": {
    "title": "Liên hệ với chúng tôi",
    "titleForSite": "",
    "successMessage": "Thông điệp về việc xử lý dữ liệu thành công",
    "unsuccessMessage": "Thông điệp về việc xử lý dữ liệu không thành công",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 5,
  "position": 1,
  "identifier": "contact_us",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "string",
      "marker": "first_name",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "Tên"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "email",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "requiredValidator": {
          "strict": true
        },
        "emailInspectionValidator": true
      },
      "localizeInfos": {
        "title": "Email"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "string",
      "marker": "surname",
      "isLogin": null,
      "isSignUp": null,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {
        "stringInspectionValidator": {
          "stringMax": 0,
          "stringMin": 0,
          "stringLength": 0
        }
      },
      "localizeInfos": {
        "title": "Họ"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "list",
      "marker": "topic",
      "isLogin": null,
      "isSignUp": null,
      "position": 4,
      "settings": {},
      "isVisible": true,
      "listTitles": [
        {
          "title": "Bài viết",
          "value": "article",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 1
        },
        {
          "title": "Bài viết-2",
          "value": "article-2",
          "extended": {
            "type": null,
            "value": null
          },
          "position": 2
        }
      ],
      "validators": {
        "requiredValidator": {
          "strict": true
        }
      },
      "localizeInfos": {
        "title": "Chủ đề"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "text",
      "marker": "text",
      "isLogin": null,
      "isSignUp": null,
      "position": 5,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Nội dung"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "spam",
      "marker": "spam",
      "isLogin": null,
      "isSignUp": null,
      "position": 6,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Bạn không phải là robot?"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "button",
      "marker": "send",
      "isLogin": null,
      "isSignUp": null,
      "position": 7,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Gửi"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ]
}

Sử dụng hook useFormConfig

Hook này cung cấp dữ liệu cấu hình biểu mẫu.

Ví dụ:

const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

Tích hợp Formik

Ví dụ:

<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
  {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
    isSubmitting,
  }) => {
    return (
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.email}
        />
        <input
          type="text"
          name="first_name"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.first_name}
        />
        <input
          type="text"
          name="surname"
          onChange={handleChange}
          onBlur={handleBlur}
          value={values?.surname}
        />
        <button type="submit" disabled={isSubmitting}>
          Gửi
        </button>
      </form>
    );
  }}
</Formik>

Ví dụ cuối cùng

// 1. Nhập defineOneEntry, Formik và useFormConfig
import { defineOneEntry } from 'oneentry';
import { Formik } from 'formik';
import useFormConfig from './useFormConfig';

// 1.1 định nghĩa PROJECT_URL và APP_TOKEN
const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Tạo một client API
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Lấy dữ liệu biểu mẫu từ OneEntry
const formData = await Forms.getFormByMarker('contact_us');

// 4. Trích xuất cấu hình biểu mẫu với hook react useFormConfig
const {
  fields,
  initialValues,
  validationSchema,
} = useFormConfig(formData?.attributes);

// 5. Tạo biểu mẫu với Formik và dữ liệu useFormConfig
return (
  <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={() => {}}>
    {({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isSubmitting,
    }) => {
      return (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.email}
          />
          <input
            type="text"
            name="first_name"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.first_name}
          />
          <input
            type="text"
            name="surname"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values?.surname}
          />
          <button type="submit" disabled={isSubmitting}>
            Gửi
          </button>
        </form>
      );
    }}
  </Formik>
);