Form.Item的子元素无法感知rules的校验结果

[leegsen7]

有需求场景如下，rules校验失败，子元素需要显示一个红色的边框

  <Form.Item
    name="mobile"
    rules={[{ validator: checkPhone }]}
  >
    <Input placeholder="联系电话" />
  </Form.Item>

[damonyoungcc]

写了一个满足某个校验规则时，字体变大的demo，这个逻辑换成设置border应该可行。

export default () => {
  const onFinish = (values: any) => {
    console.log(values)
  }

  const [isBigfontSize, setFontSize] = useState(false)

  const checkMobile = (_: any, value: string) => {
    if (value === '111') {
      setFontSize(true)
      return Promise.resolve()
    }
    setFontSize(false)
    return Promise.reject(new Error('现在输入的不是111'))
  }

  return (
    <>
      <Form
        layout='horizontal'
        onFinish={onFinish}
        footer={
          <Button block type='submit' color='primary' size='large'>
            提交
          </Button>
        }
      >
        <Form.Item
          label='手机号'
          name='mobile'
          rules={[{ validator: checkMobile }]}
        >
          <Input
            placeholder='输入111时字体会变大'
            style={{
              '--font-size': `${!isBigfontSize ? '12px' : '20px'}`,
            }}
          />
        </Form.Item>
      </Form>
    </>
  )
}

[awmleer]

嗯嗯配合 Form.Item 的 noStyle 属性应该是可行的

[leegsen7]

@yangdepp @awmleer 我新接手了一个项目，就是上面demo的那种写法。其实这种写法还是没有实际上解决【子元素无法感知rules的校验结果】这个问题，它是依靠额外的状态来处理的。另外这里如果是多个字段，多个校验的情况下，这种写法的弊端和维护性无疑是更难以把握的。是否可以考虑用render props的方式来实现。如下：

<Form.Item
  name="mobile"
  rules={[{ validator: checkPhone }]}
>
{({ value, onChange, error }) => (
  <div>
    <Input
      placeholder="联系电话"
      style={error ? errorStyle: {}}
      value={value}
      onChange={onChange}
   />
   {error && <div>error.message</div>}
  </div>
)}
</Form.Item>

[damonyoungcc]

如果是想使用renderProps的写法以及有多个字段判断，也是支持的（上面大佬提到的noStyle）

    <Form.Item name='A' label='A'>
      <Input />
    </Form.Item>
    <Form.Item name='B' label='B'>
      <Input />
    </Form.Item>
    <Form.Item
      noStyle
      //A， B, C的值变化时
      shouldUpdate={(prevValues, curValues) =>
        prevValues.A !== curValues.A ||
        prevValues.B !== curValues.B ||
        prevValues.C !== curValues.C
      }
    >
      {({ getFieldValue }) => {
        let style
        if (getFieldValue('A') === 'aaa') {
          style = { border: '1px solid red' }
        }
        if (getFieldValue('B') === 'bbb') {
          style = { border: '1px solid green' }
        }
        if (getFieldValue('C') === 'ccc') {
          style = { border: '1px solid yellow' }
        }
        return (
          <Form.Item name='C' label='C'>
            <Input style={style} />
          </Form.Item>
        )
      }}
    </Form.Item>

如果你使用hooks，用useWatch应该也是可以的，更简单一些

[leegsen7]

感谢回复。这种使用方式还是没有解决感知rules校验结果的问题，而且也比较复杂。我认为我上述例子的方式更简洁更易维护，当然是在官方能支持的情况下。

[awmleer]

和另一个 discussion 相似，这里或许也能用 form.getFieldValue 来解决？

[leegsen7]

和另一个 discussion 相似，这里或许也能用 form.getFieldValue 来解决？

@awmleer

form.getFieldValue 不太行吧。 form. getFieldError 好像倒可以。

<Form.Item
  name="mobile"
  rules={[{ validator: checkPhone }]}
>
  <Input
      placeholder="联系电话"
      style={form. getFieldError('mobile') ? errorStyle: {}}
   />
</Form.Item>

不过input的输入好像并不会触发render，进而触发更新form. getFieldError('mobile')

其实我还是觉得上面所提及到的renderProps方式更好一些，它的自由度更高，更灵活组织代码。不在局限于子元素一定是这种情况 如果你给 Form.Item 设置了 name 属性，那么请确保它的 children 是一个有效的 ReactElement 控件，并且能够接受上文中提到的 value 和 onChange 属性（或指定的其他属性） 。
不知道官方对于上面所提及到的renderProps方式，是否会考虑采纳

[awmleer]

写了个 demo，应该解决了你说的问题

[leegsen7]

感谢！这种方式写了两次了Form.Item。不过总比现有其他方式好。