Hướng dẫn sử dụng React Final Form + MUI

npm install react-final-form final-form

import React from 'react';
import { Form, Field } from 'react-final-form';
import { TextField, Button, Box, Typography } from '@mui/material';

const onSubmit = async (values) => {
  console.log('Form values:', values);
  // Xử lý submit form
};

const validate = (values) => {
  const errors = {};
  if (!values.productName) {
    errors.productName = 'Required';
  }
  if (!values.price) {
    errors.price = 'Required';
  } else if (isNaN(values.price)) {
    errors.price = 'Must be a number';
  }
  if (!values.description) {
    errors.description = 'Required';
  }
  return errors;
};

const ProductForm = () => (
  <Form
    onSubmit={onSubmit}
    validate={validate}
    render={({ handleSubmit, form, submitting, pristine, values }) => (
      <form onSubmit={handleSubmit} noValidate>
        <Box sx={{ '& .MuiTextField-root': { m: 1, width: '25ch' } }}>
          <Typography variant="h6" gutterBottom>
            Thêm Sản Phẩm
          </Typography>
          <Field name="productName">
            {({ input, meta }) => (
              <TextField
                {...input}
                label="Tên sản phẩm"
                variant="outlined"
                error={meta.error && meta.touched}
                helperText={meta.touched && meta.error}
              />
            )}
          </Field>
          <Field name="price">
            {({ input, meta }) => (
              <TextField
                {...input}
                label="Giá"
                variant="outlined"
                error={meta.error && meta.touched}
                helperText={meta.touched && meta.error}
              />
            )}
          </Field>
          <Field name="description">
            {({ input, meta }) => (
              <TextField
                {...input}
                label="Mô tả"
                variant="outlined"
                multiline
                rows={4}
                error={meta.error && meta.touched}
                helperText={meta.touched && meta.error}
              />
            )}
          </Field>
          <Box mt={2}>
            <Button
              type="submit"
              variant="contained"
              color="primary"
              disabled={submitting || pristine}
            >
              Thêm sản phẩm
            </Button>
          </Box>
        </Box>
      </form>
    )}
  />
);

export default ProductForm;