ReactJS và Ant Design là hai công nghệ được sử dụng rộng rãi trong việc xây dựng giao diện người dùng hiện đại. Ant Design là một bộ thư viện UI được xây dựng trên cơ sở của ReactJS, cung cấp cho người dùng những thành phần giao diện tiêu chuẩn và dễ dàng tuỳ chỉnh.
<Form.Item
label={"Địa chỉ"}
hidden={step != 'fullName'}
name={"address"}
rules={[
{
required: true,
message: 'Vui lòng nhập địa chỉ!',
},
{
validator(_, value) {
if (!value)
return Promise.resolve();
if (!value?.place) {
return Promise.reject(new Error('Vui lòng nhập địa chỉ!'));
}
return Promise.resolve();
},
},
]}
>
<AddressInput/>
</Form.Item>
Một trong những tính năng quan trọng của Ant Design đó là form rule – một công cụ hỗ trợ cho việc kiểm tra và xác thực dữ liệu được nhập vào trong form. Trong bài viết này, chúng ta sẽ tìm hiểu cách tuỳ chỉnh form rule trong ReactJS cùng với Ant Design.
Bắt đầu với form trong Ant Design
Để bắt đầu sử dụng form rule trong ReactJS với Ant Design, chúng ta cần có một form component được tạo bằng ReactJS và sử dụng các thành phần của Ant Design. Để dễ hiểu, chúng ta sẽ tạo một form đơn giản với hai trường là “username” và “password”.
Đầu tiên, hãy cài đặt Ant Design bằng lệnh npm sau đây:
npm install antd --save
Tiếp theo, chúng ta sẽ import các thành phần cần thiết trong component của form, bao gồm Form, Input từ antd và useState từ React như sau:
import React, { useState } from "react";
import { Form, Input } from "antd";
Sau đó, chúng ta sẽ tạo một state đối tượng để lưu trữ giá trị của hai trường “username” và “password” trong form như sau:
const [formValues, setFormValues] = useState({
username: "",
password: ""
});
Tiếp theo, chúng ta sẽ định nghĩa một hàm để lắng nghe sự thay đổi của form và cập nhật giá trị trong state:
const onChange = (e) => {
setFormValues({
...formValues,
[e.target.name]: e.target.value
});
};
Sau đó, chúng ta sẽ render form với hai trường “username” và “password” bằng cách sử dụng các thành phần Form.Item và Input của Ant Design như sau:
<Form>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: "Please input your username!" }]}
>
<Input name="username" value={formValues.username} onChange={onChange} />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[{ required: true, message: "Please input your password!" }]}
>
<Input.Password
name="password"
value={formValues.password}
onChange={onChange}
/>
</Form.Item>
</Form>
Bây giờ, nếu bạn thử nhập vào các giá trị và submit form, bạn sẽ thấy rằng form sẽ tự động kiểm tra và hiển thị thông báo lỗi nếu không có giá trị nào được nhập vào. Đây là công việc được thực hiện bởi form rule của Ant Design.
Tuỳ biến form rule trong Ant Design
Để tuỳ biến form rule trong Ant Design, chúng ta có thể sử dụng thuộc tính rules của Form.Item như đã thấy ở ví dụ trên. Các rule trong một form có thể bao gồm nhiều điều kiện như required, min, max, pattern, …
Nếu chúng ta muốn thay đổi thông báo lỗi mặc định của rule, chúng ta có thể thêm thuộc tính message như đã làm trong ví dụ trên. Ví dụ: rules={[{ required: true, message: "Vui lòng nhập giá trị!" }]}
Ngoài ra, chúng ta còn có thể tạo ra các rule tùy chỉnh bằng cách sử dụng hàm validator như sau:
const customRule = (rule, value, callback) => {
if (value !== "abc") {
callback("Giá trị không hợp lệ!");
} else {
callback();
}
};
Sau đó, chúng ta có thể sử dụng rule tùy chỉnh này trong rules như sau: rules={[{ validator: customRule }]}
Ngoài ra, Ant Design còn hỗ trợ nhiều loại rule và cách tuỳ biến khác nhau, bạn có thể tham khảo tài liệu chính thức để biết thêm chi tiết.
Kết luận
Qua bài viết này, chúng ta đã tìm hiểu cách sử dụng và tuỳ biến form rule trong ReactJS và Ant Design. Có thể thấy, việc sử dụng form rule giúp chúng ta dễ dàng kiểm tra và xác thực dữ liệu trong các form, từ đó cải thiện trải nghiệm người dùng và tăng tính bảo mật cho ứng dụng. Hy vọng bài viết này sẽ hữu ích cho bạn trong việc tùy biến form với Ant Design trong các dự án ReactJS của mình.
