蚂蚁设计形式的验证器

Question

我正在尝试编写一个表单。清单验证器以检查重复值（名称），如果我先在第一个索引处填写字段，则代码按预期工作，然后创建一个新索引（新的field行），然后填写字段在第二个索引，依此类推...但是如果我同时创建两个或更多行（索引），并尝试填写第二个索引（离开第一个空白），则会出现错误。请参阅我写的规则，

我整天都在尝试在名称字段上键入列表的值，以及是否有任何对象是null返回所需的错误消息，但没有运气。

有任何帮助与验证者打交道吗？

        <Form.List name="ABC">
          {(fields, { add, remove }) => (
            <>
              {fields.map(
                ({ key, name, fieldKey, ...restField }) => (
                          <Form.Item
                            label={`Series Name ${
                              fieldKey + 1
                            }`}
                            {...restField}
                            name={[name, "name"]}
                            fieldKey={[fieldKey, "name"]}
                            rules={[
                              {
                                required: true,
                                // whitespace: true,
                                message: "Missing series name",
                              },
                              ({ getFieldValue }) => ({
                                validator(_, value) {
                                  if (
                                    !value ||
                                    getFieldValue("ABC")
                                    .filter(
                                      (d) => d.name === value
                                    ).length === 1
                                  ) {
                                    return Promise.resolve();
                                  }
                                  return Promise.reject(
                                    new Error(
                                      "Duplicate values are not allowed."
                                    )
                                  );
                                },
                              }),
                            ]}
                          >
                            <Input placeholder="Series Name" />
                          </Form.Item>
                        </Col>



                      <Form.Item>
                        <MinusCircleOutlined
                          onClick={() => {
                            remove(name);
                          }}
                        />
                      </Form.Item>
                )
              )}

              <Form.Item {...button}>
                  <Button
                  type="primary"
                  onClick={() => {
                    add();
                  }}
                  block
               >
                  Create Series
                </Button>
              </Form.Item>
            </>
          )}
        </Form.List>

Answer 1

当您创建两个新行并填充第二行时，在过滤器中，您检查d.name ===该值。由于您尚未在第一行或字段中输入任何值，因此name当前在abc数组中不确定。

d.name尚不存在，这就是为什么它给您错误的原因。

如果您不触摸该领域，它将保持不确定。输入该字段后，它将添加{name：somevalue}

解决方案：
只需在d？.name ===值中添加可选的链操作员？。

希望这能解决您的问题。

Answer 2

最后写了验证者，希望这对某人有帮助。（将改善这一点）

        rules={[
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (
                !value ||
                getFieldValue(
                  selectedFormType
                ).some(
                  (d) => d === undefined
                )
              ) {
                return Promise.reject(
                  new Error(
                    "Few name fields are blank, remove them."
                  )
                );
              } else if (
                !value ||
                getFieldValue(
                  selectedFormType
                ).filter(
                  (d) => d.name === value
                ).length !== 1
              ) {
                return Promise.reject(
                  new Error(
                    "Duplicate values are not allowed."
                  )
                );
              } else {
                return Promise.resolve();
              }
            },
          }),
        ]}

Answer 3

我使用了此代码，有几个问题，例如显示错误最后索引，如果没有返回，则所有索引都会显示错误。

这是完整的修复和测试

rules={[({getFieldValue}) => ({
         validator(_, value) {
                 return validateField(getFieldValue, value, 'value')
   }})]}



function validateField(getFieldValue, value, key) {
    let fieldValue = getFieldValue('seerportal_parameters');
    if (!value) {
        for (let i = 0; i < fieldValue.length; i++) {
            let j = fieldValue[i];
            if (j === undefined) {
                return Promise.reject(new Error(`Please enter parameter ${key}!`));
            }
        }
    } else {
        let filtered = fieldValue.filter((d) => (d && d[key]) === value);
        if (filtered.length !== 1) {
            for (let i = 0; i < fieldValue.length; i++) {
                let j = fieldValue[i];
                if (j) {

                    if (filtered[0][key] === j[key]) {
                        return Promise.reject(new Error(`Duplicate parameter ${key} found`));
                    }
                }
            }
        } else {
            return Promise.resolve();
        }
    }
}