Je suis la doc d'Antd et j'ai essayé d'utiliser ce morceau de code d'ici élément de formulaire dynamique etd :

import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

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

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
                <Form.Item
                  {...field}
                  name={[field.name, 'first']}
                  fieldKey={[field.fieldKey, 'first']}
                  rules={[{ required: true, message: 'Missing first name' }]}
                >
                  <Input placeholder="First Name" />
                </Form.Item>
                <Form.Item
                  {...field}
                  name={[field.name, 'last']}
                  fieldKey={[field.fieldKey, 'last']}
                  rules={[{ required: true, message: 'Missing last name' }]}
                >
                  <Input placeholder="Last Name" />
                </Form.Item>
                <MinusCircleOutlined onClick={() => remove(field.name)} />
              </Space>
            ))}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Mais j'ai cette erreur, lorsque j'ajoute des lignes, puis supprime certaines d'entre elles et me soumets enfin, le validateur continue de fonctionner même après avoir supprimé ces lignes.

enter image description here

Voici une démo qui reproduit mon erreur. https://codesandbox.io/s/quizzical-ride -m1pe6?file=/src/App.js

1
Javier Cárdenas 11 nov. 2020 à 21:00

1 réponse

Meilleure réponse

C'est un bug d'antd.

Un problème a été ouvert à ce sujet sur leur github.
https://github.com/ant-design/ant-design/issues/ 27576

Et le PR associé :
https://github.com/react-component/field-form/pull/ 213

Un correctif a été fusionné la semaine dernière. Normalement, la prochaine version inclura le correctif.

2
Paterss 12 nov. 2020 à 11:32