当前位置：首页 > article >正文

form的方法

article 2025/1/6 13:31:35

1.form.setFields

form.setFields 是 Ant Design 的 Form 组件提供的一个方法，用于批量设置表单字段的值和状态。它允许你一次性更新多个字段的状态，包括它们的值、验证状态（如是否有错误）等。这在你需要根据某些逻辑或事件动态更新表单时非常有用。

form.setFields(fields)
参数：

fields: 一个数组，每个元素都是一个对象，表示要更新的字段。每个对象包含以下属性：
name: 字段名称，可以是字符串或字符串数组（当表单字段是嵌套结构时使用）。
value: 字段的新值。
errors: 一个错误信息数组，用于设置字段的验证错误信息。如果为空，则清除该字段的错误信息。
warnings: 警告信息数组，与 errors 类似，但用于显示警告而不是错误。

使用场景

        批量更新字段值：当你需要同时更新多个字段的值时，比如从服务器获取数据并填充到表单中。
        设置字段的验证状态：当你想要手动触发某些字段的验证失败或成功状态，或者添加自定义的验证信息。
        清空错误信息：如果你希望清除某个字段的验证错误信息，可以通过将 errors 设置为空数组来实现。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
  };

  // 批量设置字段值和状态
  const setFieldsExample = () => {
    form.setFields([
      {
        name: ['username'],
        value: 'defaultUsername',
      },
      {
        name: ['password'],
        value: 'defaultPassword',
        errors: ['This is a custom error message for password!'], // 添加自定义错误信息
      },
    ]);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username" label="Username" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
      <Form.Item name="password" label="Password" rules={[{ required: true }]}>
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={setFieldsExample} style={{ marginLeft: 8 }}>
          Set Fields
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在这个例子中，点击“Set Fields”按钮会调用 setFieldsExample 函数，该函数使用 form.setFields 方法来批量设置用户名和密码字段的值，并为密码字段添加一个自定义的验证错误信息。

注意事项

        字段名匹配：确保传递给 setFields 的字段名与表单中的字段名一致，特别是对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
        性能考虑：虽然 setFields 可以一次性更新多个字段，但在大量字段的情况下，频繁调用可能会导致性能问题。因此，在实际应用中应谨慎使用，并尽量优化调用频率。
        与其他方法结合使用：你可以将 setFields 与其他表单方法（如 setFieldValue 或 validateFields）结合使用，以实现更复杂的表单操作逻辑。
通过这种方式，你可以更加灵活地控制表单的行为，特别是在处理复杂的数据流或用户交互时。

2.form.resetFields

resetFields 是 Ant Design 的 Form 组件提供的一个方法，用于重置表单字段到其初始状态。它不仅会清除所有字段的值，还会重置字段的验证状态和错误信息。这在用户想要清除表单或重新开始填写时非常有用。

form.resetFields([names])

参数：
- [names]: 可选参数，可以是字符串、字符串数组或空。指定要重置的字段名称。如果不提供此参数，则重置整个表单的所有字段。
返回值：无直接返回值。

使用场景

清除表单：当用户完成提交后，或者想要重新填写表单时，可以调用 resetFields 来清除所有字段的内容和状态。
部分字段重置：可以在某些情况下仅重置特定字段，而不是整个表单。
初始化表单：当你需要重新加载页面或组件时，使用 resetFields 可以确保表单回到初始状态。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
    // 提交成功后重置表单
    form.resetFields();
  };

  // 手动重置表单
  const handleReset = () => {
    form.resetFields(); // 重置整个表单
  };

  // 重置特定字段
  const handleResetUsername = () => {
    form.resetFields(['username']); // 仅重置用户名字段
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleReset} style={{ marginLeft: 8 }}>
          Reset All Fields
        </Button>
        <Button onClick={handleResetUsername} style={{ marginLeft: 8 }}>
          Reset Username Only
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在这个例子中：

点击“Submit”按钮提交表单后，如果提交成功，表单将自动重置。
点击“Reset All Fields”按钮会调用 handleReset 函数，该函数使用 form.resetFields() 方法来重置整个表单。
点击“Reset Username Only”按钮会调用 handleResetUsername 函数，该函数只重置用户名字段。

注意事项

初始值：resetFields 不仅清除字段的值，还会将字段恢复到它们的初始状态，包括任何默认值或由 initialValue 属性设置的值。
部分字段重置：你可以通过传递字段名数组给 resetFields 来选择性地重置特定字段，而不是整个表单。
与 setFieldsValue 结合使用：如果你需要在重置之后立即设置某些字段的新值，可以结合 setFieldsValue 方法使用。
避免频繁调用：为了提高用户体验，避免在每次输入变化时都调用 resetFields，而是选择合适的时机（如提交成功后、用户明确表示要重置时）进行重置。

通过这种方式，你可以确保表单在需要时能够被正确地重置，并且为用户提供了一个清晰的操作反馈机制。

3.form.submit

submit 是 Ant Design 的 Form 组件提供的一个方法，用于提交表单。它触发表单的验证流程，并在所有验证规则通过后，收集表单数据并执行提交逻辑。如果任何字段验证失败，则不会提交表单，并且会显示相应的错误提示。

form.submit();

参数：无参数。
返回值：无直接返回值，但它内部调用了 validateFields 并处理了验证结果。

使用场景

手动提交表单：当用户点击某个按钮或其他交互事件时，可以调用 form.submit() 来触发表单提交。
结合其他逻辑：可以在某些特定条件下自动提交表单，比如定时提交、条件满足时自动提交等。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
  };

  // 触发表单提交
  const handleManualSubmit = () => {
    form.submit(); // 触发表单的验证和提交
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleManualSubmit} style={{ marginLeft: 8 }}>
          Manual Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在这个例子中，点击“Submit”按钮会直接触发表单的提交行为（即默认的 HTML 表单提交）。而点击“Manual Submit”按钮则会调用 handleManualSubmit 函数，该函数使用 form.submit() 方法来手动触发表单的验证和提交流程。如果所有字段都有效，则会调用 onFinish 回调函数，你可以在这里处理表单提交的具体逻辑，如发送数据到服务器。

注意事项

与 onFinish 和 onFinishFailed 结合使用：确保你在 Form 组件上定义了 onFinish 和 onFinishFailed 回调函数，以便正确处理提交成功或失败的情况。
避免重复提交：在实际应用中，你可能需要禁用提交按钮或添加加载状态，以防止用户多次点击导致重复提交。
与 validateFields 的区别：submit 不仅会触发表单验证，还会尝试提交表单数据；而 validateFields 只是进行验证，并不会触发提交行为。
自定义提交逻辑：如果你有复杂的提交逻辑（例如分步提交），你可以根据具体情况调整 submit 的使用方式，甚至完全控制提交过程而不依赖 form.submit()。

通过这种方式，你可以确保表单数据在提交之前是有效的，并且能够及时向用户提供反馈，告知他们哪些地方需要修正。同时，submit 方法提供了一种简单的方式来进行表单的验证和提交操作。

4.form.validateFields

validateFields 是 Ant Design 的 Form 组件提供的一个方法，用于触发表单字段的验证。它允许你根据定义的规则检查表单字段的有效性，并在所有验证通过后返回表单数据。如果任何字段验证失败，则会返回相应的错误信息。

form.validateFields([options]).then(values => { /* ... */ }).catch(errorInfo => { /* ... */ });

参数：
- [options]: 可选对象，可以包含以下属性：
  - validateOnly: 如果设置为 true，则只进行验证而不返回值，默认是 false。
  - preserve: 如果设置为 true，则不会清除未触发表单字段的验证状态，默认是 false。
  - [name]: 可选字符串或字符串数组，指定要验证的字段名称。如果不提供此参数，则验证所有字段。
返回值：返回一个 Promise，当所有验证都通过时，Promise 解析为包含表单字段值的对象；如果有任何一个字段验证失败，Promise 将被拒绝，并传递包含错误信息的对象。

使用场景

提交表单前验证：在用户提交表单之前，确保所有必填项已填写且符合格式要求。
动态验证特定字段：可以在某些事件发生时（如输入框失去焦点），仅验证特定字段。
自定义验证逻辑：结合自定义验证规则实现更复杂的验证需求。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑
  };

  // 触发表单验证
  const handleValidate = async () => {
    try {
      await form.validateFields();
      message.success('All fields are valid!');
    } catch (errorInfo) {
      console.log('Validate Failed:', errorInfo);
      message.error('Validation failed, please check the form.');
    }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleValidate} style={{ marginLeft: 8 }}>
          Validate Fields
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

在这个例子中，点击“Validate Fields”按钮会调用 handleValidate 函数，该函数使用 form.validateFields 方法来触发整个表单的验证。如果所有字段都有效，则显示成功消息；否则，捕获错误并显示失败消息。

注意事项

异步验证：如果你有异步验证规则（例如检查用户名是否已经存在），validateFields 也会等待这些异步操作完成。
部分字段验证：你可以通过传递字段名数组给 validateFields 来验证特定字段，而不是整个表单。
与 setFieldsValue 和其他方法结合使用：在更新字段值后，通常需要重新验证以反映最新的表单状态。你可以将 validateFields 与其他表单方法（如 setFieldsValue）结合使用来实现这一点。
避免频繁调用：为了提高用户体验，避免在每次输入变化时都调用 validateFields，而是选择合适的时机（如提交表单或失去焦点时）进行验证。

通过这种方式，你可以确保表单数据在提交之前是有效的，并且能够及时向用户提供反馈，告知他们哪些地方需要修正。

5.form.setFieldsValue

setFieldsValue 是 Ant Design 的 Form 组件提供的一个方法，用于设置表单字段的值。它允许你在不触发验证的情况下更新表单中一个或多个字段的值。这在你需要根据某些逻辑动态更新表单时非常有用，例如从服务器获取数据并填充到表单中，或者基于用户交互更新部分表单内容。

form.setFieldsValue(values)

参数：
- values: 一个对象，键为字段名称（可以是字符串或路径数组），值为要设置的新值。对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
返回值：无直接返回值。

使用场景

初始化表单值：当页面加载或组件挂载时，使用 setFieldsValue 设置初始值。
动态更新字段值：根据某些条件或事件动态更新表单中的字段值，而不触发验证。
填充表单数据：从服务器获取数据后，使用 setFieldsValue 填充表单，使用户可以直接编辑这些数据。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();
  const [isFilled, setIsFilled] = useState(false);

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
  };

  // 动态设置字段值
  const handleSetFieldsValue = () => {
    form.setFieldsValue({
      username: 'defaultUsername',
      password: 'defaultPassword',
    });
    setIsFilled(true);
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleSetFieldsValue} style={{ marginLeft: 8 }}>
          Set Fields Value
        </Button>
      </Form.Item>
      {isFilled && <p>Fields have been set with default values.</p>}
    </Form>
  );
};

export default MyForm;

在这个例子中：

点击“Set Fields Value”按钮会调用 handleSetFieldsValue 函数，该函数使用 form.setFieldsValue 方法来设置用户名和密码字段的值。
如果字段已经被设置，则显示一条消息告知用户。

注意事项

字段名匹配：确保传递给 setFieldsValue 的字段名与表单中的字段名一致，特别是对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
不会触发验证：setFieldsValue 不会触发字段的验证规则。如果你需要在设置新值后立即验证字段，可以结合 validateFields 方法使用。
与 resetFields 结合使用：如果你想先重置表单再设置新的字段值，可以先调用 resetFields，然后再调用 setFieldsValue。
性能考虑：虽然 setFieldsValue 可以一次性更新多个字段，但在大量字段的情况下，频繁调用可能会导致性能问题。因此，在实际应用中应谨慎使用，并尽量优化调用频率。
初始值覆盖：如果字段已经有初始值（通过 initialValue 属性设置），setFieldsValue 会覆盖这些初始值。

通过这种方式，你可以更加灵活地控制表单的行为，特别是在处理复杂的数据流或用户交互时。setFieldsValue 提供了一种简单而有效的方法来动态更新表单字段的值。

6.form.getFieldValue

getFieldValue 是 Ant Design 的 Form 组件提供的一个方法，用于获取单个表单字段的当前值。它允许你在需要时直接访问某个字段的值，而不需要手动从 DOM 中查询或依赖其他状态管理方式。

方法签名

form.getFieldValue(name)

参数：
- name: 字段名称，可以是字符串（适用于非嵌套字段）或字符串数组（适用于嵌套字段路径）。例如 'username' 或 ['user', 'address', 'city']。
返回值：返回指定字段的当前值。如果字段不存在或没有值，则返回 undefined。

使用场景

获取用户输入：在某些逻辑处理中需要获取特定字段的值，比如根据用户的输入动态更新界面。
条件渲染：基于表单字段的值来决定是否渲染某些组件或更改界面显示。
验证逻辑：在自定义验证规则中使用 getFieldValue 来获取相关字段的值进行比较或计算。
提交前检查：在表单提交之前，获取所有字段的值并进行额外的处理或检查。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();
  const [username, setUsername] = useState('');

  // 获取字段值并更新状态
  const handleGetFieldValue = () => {
    const usernameValue = form.getFieldValue('username');
    setUsername(usernameValue);
    message.info(`Current Username: ${usernameValue}`);
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleGetFieldValue} style={{ marginLeft: 8 }}>
          Get Username Value
        </Button>
      </Form.Item>
      {username && <p>Current Username: {username}</p>}
    </Form>
  );
};

export default MyForm;

在这个例子中：

点击“Get Username Value”按钮会调用 handleGetFieldValue 函数，该函数使用 form.getFieldValue('username') 方法来获取用户名字段的当前值，并将其存储在组件的状态中。
如果获取到了用户名，则会在界面上显示当前的用户名值。

注意事项

字段名匹配：确保传递给 getFieldValue 的字段名与表单中的字段名一致，特别是对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
性能考虑：频繁调用 getFieldValue 可能会影响性能，尤其是在大型表单中。尽量减少不必要的调用次数。
结合 getFieldsValue 使用：如果你需要获取多个字段的值，可以考虑使用 getFieldsValue 方法，它可以一次性返回多个字段的值。
默认值：如果字段还没有被用户修改过，getFieldValue 返回的是字段的初始值（如果有设置），否则为 undefined。
异步操作：注意，在某些情况下（如异步数据加载后填充表单），你可能需要确保数据已经正确填充到表单中再调用 getFieldValue。

通过这种方式，你可以方便地访问表单字段的值，从而实现更灵活的逻辑控制和用户交互。getFieldValue 提供了一种简单而有效的方法来获取单个表单字段的当前值。

7.form.`getFieldsValue`

getFieldsValue 是 Ant Design 的 Form 组件提供的一个方法，用于获取表单中多个字段的当前值。它允许你一次性获取一组字段的值，而不需要逐一调用 getFieldValue。这在需要批量处理或提交表单数据时非常有用。

form.getFieldsValue([names])

参数：
- [names]: 可选参数，可以是字符串数组或空。指定要获取的字段名称列表。如果不提供此参数，则获取所有字段的值。
返回值：返回一个对象，键为字段名称，值为对应的字段值。如果字段不存在或没有值，则该字段不会出现在返回的对象中，或者其值为 undefined（取决于配置）。

使用场景

批量获取字段值：当需要同时获取多个字段的值时，使用 getFieldsValue 可以简化代码并提高效率。
条件渲染：基于多个表单字段的值来决定是否渲染某些组件或更改界面显示。
表单提交：在表单提交前，使用 getFieldsValue 获取所有字段的值，并进行必要的处理或验证。
动态更新：根据某些逻辑动态更新界面或执行其他操作，比如保存到本地存储或发送到服务器。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();
  const [formValues, setFormValues] = useState({});

  // 批量获取字段值
  const handleGetFieldsValue = () => {
    const values = form.getFieldsValue(); // 获取所有字段的值
    // 或者指定字段：form.getFieldsValue(['username', 'password']);
    setFormValues(values);
    message.info(`Current Values: ${JSON.stringify(values)}`);
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={handleGetFieldsValue} style={{ marginLeft: 8 }}>
          Get Fields Value
        </Button>
      </Form.Item>
      {Object.keys(formValues).length > 0 && (
        <pre>Current Values: {JSON.stringify(formValues, null, 2)}</pre>
      )}
    </Form>
  );
};

export default MyForm;

在这个例子中：

点击“Get Fields Value”按钮会调用 handleGetFieldsValue 函数，该函数使用 form.getFieldsValue() 方法来获取所有字段的当前值，并将其存储在组件的状态中。
如果获取到了字段值，则会在界面上显示当前的字段值。

注意事项

字段名匹配：确保传递给 getFieldsValue 的字段名与表单中的字段名一致，特别是对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
性能考虑：虽然 getFieldsValue 可以一次性获取多个字段，但在大型表单中频繁调用可能会导致性能问题。尽量减少不必要的调用次数。
部分字段获取：如果你只需要获取特定的几个字段，可以通过传递字段名数组给 getFieldsValue 来实现。
结合 setFieldsValue 使用：当你需要先获取字段值再设置新值时，可以结合 setFieldsValue 方法使用。
默认值：如果字段还没有被用户修改过，getFieldsValue 返回的是字段的初始值（如果有设置），否则为 undefined。
异步操作：注意，在某些情况下（如异步数据加载后填充表单），你可能需要确保数据已经正确填充到表单中再调用 getFieldsValue。

通过这种方式，你可以方便地批量获取表单字段的值，从而简化逻辑控制和用户交互。getFieldsValue 提供了一种高效的方法来获取多个表单字段的当前值，适用于各种场景。

8.form.getFieldError

getFieldError 是 Ant Design 的 Form 组件提供的一个方法，用于获取单个表单字段的验证错误信息。它允许你在需要时直接访问某个字段的验证错误，而不需要手动从 DOM 中查询或依赖其他状态管理方式。

form.getFieldError(name)

参数：
- name: 字段名称，可以是字符串（适用于非嵌套字段）或字符串数组（适用于嵌套字段路径）。例如 'username' 或 ['user', 'address', 'city']。
返回值：返回一个包含该字段所有验证错误信息的数组。如果没有错误信息，则返回一个空数组。

使用场景

显示错误信息：在用户输入不符合要求时，使用 getFieldError 获取错误信息并在界面上显示给用户。
条件逻辑：基于特定字段是否有错误来决定是否执行某些操作，比如禁用提交按钮。
自定义验证提示：根据字段的错误信息提供更详细的反馈或引导用户如何修正问题。
调试和日志记录：在开发过程中，使用 getFieldError 来检查和记录哪些字段存在验证错误。

示例代码

假设我们有一个包含用户名和密码的登录表单：

import React, { useState } from 'react';
import { Form, Input, Button, message } from 'antd';

const MyForm = () => {
  const [form] = Form.useForm();
  const [errors, setErrors] = useState({});

  // 获取字段错误信息并更新状态
  const handleGetFieldError = (fieldName) => {
    const errorMessages = form.getFieldError(fieldName);
    setErrors((prevErrors) => ({
      ...prevErrors,
      [fieldName]: errorMessages,
    }));
    if (errorMessages.length > 0) {
      message.error(`Field ${fieldName} has errors: ${errorMessages.join(', ')}`);
    } else {
      message.success(`Field ${fieldName} has no errors.`);
    }
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里处理表单提交逻辑，例如发送到服务器
    message.success('Form submitted successfully!');
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button onClick={() => handleGetFieldError('username')} style={{ marginLeft: 8 }}>
          Get Username Errors
        </Button>
        <Button onClick={() => handleGetFieldError('password')} style={{ marginLeft: 8 }}>
          Get Password Errors
        </Button>
      </Form.Item>
      {errors.username && errors.username.length > 0 && (
        <p>Username Errors: {errors.username.join(', ')}</p>
      )}
      {errors.password && errors.password.length > 0 && (
        <p>Password Errors: {errors.password.join(', ')}</p>
      )}
    </Form>
  );
};

export default MyForm;

在这个例子中：

点击“Get Username Errors”按钮会调用 handleGetFieldError 函数，并传入 'username' 作为参数，该函数使用 form.getFieldError('username') 方法来获取用户名字段的当前验证错误信息，并将其存储在组件的状态中。
如果用户名字段有验证错误，则会在界面上显示错误信息；如果没有错误，则显示成功消息。
同样地，“Get Password Errors”按钮会为密码字段执行相同的操作。

注意事项

字段名匹配：确保传递给 getFieldError 的字段名与表单中的字段名一致，特别是对于嵌套结构的字段，应该提供完整的路径（例如 ['user', 'address', 'city']）。
性能考虑：频繁调用 getFieldError 可能会影响性能，尤其是在大型表单中。尽量减少不必要的调用次数。
结合 validateFields 使用：如果你需要触发验证后再获取错误信息，可以先调用 validateFields 方法，然后再调用 getFieldError。
默认值：如果字段没有验证错误，getFieldError 返回的是一个空数组。
异步验证：注意，在某些情况下（如异步验证），你可能需要确保验证已经完成再调用 getFieldError。

通过这种方式，你可以方便地访问表单字段的验证错误信息，从而实现更灵活的逻辑控制和用户交互。getFieldError 提供了一种简单而有效的方法来获取单个表单字段的验证错误信息。

下面是我查到的很多方法

    isFieldsTouched: [Function: isFieldsTouched],
    isFieldTouched: [Function: isFieldTouched],
    isFieldValidating: [Function: isFieldValidating],
    isFieldsValidating: [Function: isFieldsValidating],
    isFieldError: [Function: isFieldError],
    isFieldsError: [Function: isFieldsError],
    getFieldInstance: [Function: getFieldInstance],
    getInternalHooks: [Function: getInternalHooks],
    registerField: [Function: registerField],
    unregisterField: [Function: unregisterField],
    scrollToField: [Function: scrollToField],
    getFieldsError: [Function: getFieldsError],
    getFields: [Function: getFields],
    getFieldProps: [Function: getFieldProps],
    getFieldDecorator: [Function: getFieldDecorator],
    getFieldError: [Function: getFieldError],
    getFieldWarning: [Function: getFieldWarning],
    setInitialValues: [Function: setInitialValues],
    setCallbacks: [Function: setCallbacks],
    setPreserve: [Function: setPreserve],
    setValidateMessages: [Function: setValidateMessages],
    setValidationErrors: [Function: setValidationErrors],
    setValidateTrigger: [Function: setValidateTrigger],
    setValidateOnBlur: [Function: setValidateOnBlur],
    setValidateOnSubmit: [Function: setValidateOnSubmit],
    setValidateOnChange: [Function: setValidateOnChange],
    setValidateOnMount: [Function: setValidateOnMount],
    setValidateOnUpdate: [Function: setValidateOnUpdate],
    setValidateOnBlurTrigger: [Function: setValidateOnBlurTrigger],
    setValidateOnSubmitTrigger: [Function: setValidateOnSubmitTrigger],
    setValidateOnChangeTrigger: [Function: setValidateOnChangeTrigger],
    setValidateOnMountTrigger: [Function: setValidateOnMountTrigger],
    setValidateOnUpdateTrigger: [Function: setValidateOnUpdateTrigger],
    setValidateTriggerByName: [Function: setValidateTriggerByName],
    setValidateOnBlurTriggerByName: [Function: setValidateOnBlurTriggerByName],
    setValidateOnSubmitTriggerByName: [Function: setValidateOnSubmitTriggerByName],
    setValidateOnChangeTriggerByName: [Function: setValidateOnChangeTriggerByName],
    setValidateOnMountTriggerByName: [Function: setValidateOnMountTriggerByName],
    setValidateOnUpdateTriggerByName: [Function: setValidateOnUpdateTriggerByName],
    setValidateMessagesByName: [Function: setValidateMessagesByName],
    setValidateMessagesByField: [Function: setValidateMessagesByField],
    setValidateMessagesByFieldName: [Function: setValidateMessagesByFieldName],
    setValidateMessagesByFieldNames: [Function: setValidateMessagesByFieldNames],
    setValidateMessagesByFieldNamesArray: [Function: setValidateMessagesByFieldNamesArray],
    setValidateMessagesByFieldNamesObject: [Function: setValidateMessagesByFieldNamesObject],
    setValidateMessagesByFieldNamesMap: [Function: setValidateMessagesByFieldNamesMap],
  setValidateMessagesByFieldNamesSet: [Function: setValidateMessagesByFieldNamesSet],
  setValidateMessagesByFieldNamesList: [Function: setValidateMessagesByFieldNamesList],
  setValidateMessagesByFieldNamesArrayObject: [Function: setValidateMessagesByFieldNamesArrayObject],
  setValidateMessagesByFieldNamesArraySet: [Function: setValidateMessagesByFieldNamesArraySet],
  setValidateMessagesByFieldNamesArrayMap: [Function: setValidateMessagesByFieldNamesArrayMap],
  setValidateMessagesByFieldNamesArrayList: [Function: setValidateMessagesByFieldNamesArrayList],
  setValidateMessagesByFieldNamesArrayObjectList: [Function: setValidateMessagesByFieldNamesArrayObjectList],
  setValidateMessagesByFieldNamesArraySetList: [Function: setValidateMessagesByFieldNamesArraySetList],
  setValidateMessagesByFieldNamesArrayMapList: [Function: setValidateMessagesByFieldNamesArrayMapList],
  setValidateMessagesByFieldNamesArrayObjectSet: [Function: setValidateMessagesByFieldNamesArrayObjectSet],
  setValidateMessagesByFieldNamesArrayObjectMap: [Function: setValidateMessagesByFieldNamesArrayObjectMap],
  setValidateMessagesByFieldNamesArrayObjectList: [Function: setValidateMessagesByFieldNamesArrayObjectList],
  setValidateMessagesByFieldNamesArraySetMap: [Function: setValidateMessagesByFieldNamesArraySetMap],
  setValidateMessagesByFieldNamesArraySetList: [Function: setValidateMessagesByFieldNamesArraySetList],
  setValidateMessagesByFieldNamesArrayMapList: [Function: setValidateMessagesByFieldNamesArrayMapList],
  setValidateMessagesByFieldNamesArrayObjectSetList: [Function: setValidateMessagesByFieldNamesArrayObjectSetList],
  setValidateMessagesByFieldNamesArrayObjectMapList: [Function: setValidateMessagesByFieldNamesArrayObjectMapList],
  setValidateMessagesByFieldNamesArrayObjectSetMap: [Function: setValidateMessagesByFieldNamesArrayObjectSetMap],
  setValidateMessagesByFieldNamesArrayObjectSetList: [Function: setValidateMessagesByFieldNamesArrayObjectSetList],
  setValidateMessagesByFieldNamesArrayObjectMapList: [Function: setValidateMessagesByFieldNamesArrayObjectMapList],
  setValidateMessagesByFieldNamesArrayObjectSetMapList: [Function: setValidateMessagesByFieldNamesArrayObjectSetMapList],
  setValidateMessagesByFieldNamesArrayObjectSetMapList: [Function: setValidateMessagesByFieldNamesArrayObjectSetMapList],
  // ... 其他方法

查看全文

http://www.kler.cn/a/465779.html