Question

我已经创建了this我面临的问题的示例。以下是表单的代码：

  <Form model="user" onSubmit={v => console.log(v)}>
    <div className="field">
      <Control.text 
        model=".items[0]" 
        validators={{
          exists: (value) => !exists(value, 0, user.items)
        }} />
      <Errors
        className="errors"
        model=".items[0]" 
        show="touched"
        messages={{
          exists: "Item already exists"
        }} />
    </div>
    <div className="field">
      <Control.text 
        model=".items[1]" 
        validators={{
          exists: (value) => !exists(value, 1, user.items)
        }} />
      <Errors
        className="errors"
        model=".items[1]" 
        show="touched"
        messages={{
          exists: "Item already exists"
        }} />
    </div>
    <button type="submit">Submit</button>
  </Form>


function exists(value, index, list) {
  if (!value) {
    return false;
  }
  const existingValue = list.find((item, i) => {
    return i !== index && item === value;
  });
  return !!existingValue;
}

我试图创建一个验证器来确保列表中的唯一项目。列表中的每个项目都有自己的input控件。 IMO的预期行为是，当列表中的值不唯一时，将显示任何文本框的错误消息。我相信当任何字段发生变化时，需要验证以激活列表中的所有字段。

现在的方式，如果输入相同的值，则仅显示该控件的错误。要为包含重复值的其他控件显示错误，您需要切换到该控件并更新该值以匹配现有值。更有问题的是，如果示例中的两个控件都具有相同的值并且两个错误都显示，如果更改其中一个值，则仍会显示另一个控件的错误消息。

＆＃34; link＆＃34;的最佳方法是什么？对于像这样的例子一起在控件中进行验证？

Answer 1

我最终最终使用RRF的表单级验证器来解决问题。它并不完美，因为您无法识别出错的特定数组项，但它确实有效。

export function getValidators() {
  return {
    '': {
      uniqueCodes: (values) => {
        const items = filter(values.items, item => {
            return !!item;
        });
        return (new Set(items)).size !== items.length;
      }
    }
  };
}

<Form model={formModel} onSubmit={() => this.onSave()} validators={getValidators()}>
  ...
</Form

以反应 - 还原形式验证各个字段

1 个答案: