0

I want to call form.validateFields to validate when form.list remove But i can't

<Form.List name="formList">
            {(fields, { add, remove }, { errors }) => (
              <>
                {fields.map(({ key, name, fieldKey, ...restField }) => (
                      <Form.Item
                        {...restField}
                        name={[name,"name"]}
                        fieldKey={[fieldKey,"fieldKey"]}
                        validateTrigger={["onChange", "onBlur", "onFocus"]}
                        // dependencies={[name]}
                        rules={[
                          { required: true, message: "please enter text" },
                          { 
                            pattern: new RegExp(/^[\x00-\x7F]+$/),
                            message: "please enter A-Z, a-z, 0-9" 
                          },
                          ({ getFieldValue }) => ({
                            validator(_, value) {
                              if (value) {
                                const values: string[] = getFieldValue("formList");
                                const valuesTmp = [...values];
                                const idx = valuesTmp.findIndex((e) => e === value);
                                valuesTmp.splice(idx, 1);
                                return valuesTmp.find((item:any) => item.name === value) ? Promise.reject("It's duplicated") : Promise.resolve();
                              }
                              return Promise.resolve();
                            },
                          }),
                        ]}
                      >
                        <Input placeholder="Enter your name" />
                      </Form.Item>
                      <MinusCircleOutlined onClick={() => {
                        remove(name)
                        form.validateFields(['formList',0,'name']) // this i want to call validate for check duplicate again
                      }} />
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    Add Token
                  </Button>
                  <Form.ErrorList errors={errors} />
                </Form.Item>
              </>
            )}
          </Form.List>

But when I press the remove button, the field is deleted but not validate again.

Ant Design tell me :

<Form.List name="users">
  {fields =>
    fields.map(field => (
      <React.Fragment key={field.key}>
        <Form.Item name={[field.name, 'name']} {...someRest1} />
        <Form.Item name={[field.name, 'age']} {...someRest1} />
      </React.Fragment>
    ))
  }
</Form.List>

dependencies should be ['users',0,'name'] From https://ant.design/components/form/#API

Boss
  • 1
  • 2

2 Answers2

1

You can use it like this:

form.validateFields([['formList',0,'name'], ['formList',1,'name']])
Leon Zhang
  • 41
  • 3
0

there is zero in your array but it just should be the form fields.

     validateFields(['age','name'])
      .then(values => {
console.log("something");
 // do whatever you need to
        /*
      values:
        {
          username: 'username',
          password: 'password',
        }
      */
      })
      .catch(errorInfo => {
        /*
        errorInfo:
          {
            values: {
              username: 'username',
              password: 'password',
            },
            errorFields: [
              { name: ['password'], errors: ['Please input your Password!'] },
            ],
            out-of-date: false,
          }
        */
      });
Samira
  • 2,361
  • 1
  • 12
  • 21