Failed prop type: Invalid prop `hasFeedback` of type `object` supplied to `FormItem`, expected `boolean`.

[liuguangsen0409]

I have a question. When I used name with a string like this, name="obj.xx", the console warning me

Failed prop type: Invalid prop hasFeedback of type object supplied to FormItem, expected boolean.

Must name be a simple string? Thank u

[jannikbuschke]

hi @liuguangsen0409,

it should be possible to use strings with dotnotation, maybe your validationerrors are not correct? can you share some more code or provide a minimal reproduction with codesandbox?

[liuguangsen0409]

I do not register sandbox, let me show u some code.

// init
const initForm = () => {
  return {
    osVersion: {
      iosCanClick: false,
      iostype: '',
      iosvalue: ''
    }
  }
}

// main form
<Formik
  initialValues={ initForm() }
    onSubmit={ (values) => handleSubmit(values) }
    render={ ({ values, setFieldValue }) => (
      <Form {...formItemLayout}>
        <FormItem name="osVersion"  label="osVersion">
          <Row gutter={10}>
            <Col span={4}>
              <FormItem name="osVersion.iosCanClick">
                <Checkbox 
                  name="osVersion.iosCanClick"
                >IOS</Checkbox>
              </FormItem>
            </Col>
            <Col span={4}>
              <FormItem name="osVersion.iostype">
                <Select
                  name="osVersion.iostype"
                  placeholder="判断关系"
                  disabled={ !values.osVersion.iosCanClick }
                >
                  {
                    compareTypeEnum.map((item: any) => {
                      return <Option key={ item.key }>{ item.value }</Option>
                    })
                  }
                </Select>
              </FormItem>
            </Col>
            <Col span={16}>
              <FormItem name="osVersion.iosvalue" validate={ Validate.validateVersion }>
                <Input 
                  name="osVersion.iosvalue"
                  placeholder="请输入版本号数字，例如：5.1.4.2"
                  disabled={ !values.osVersion.iosCanClick }
                />
              </FormItem>
            </Col>
         <Row>
      <FormItem>
    </Form>
  )}
/>

// validate function
const validateVersion = (value) => {
  let error = ''
    if (!/^[\d+][\.\d+]*$/g.test(value)) {
      error = '版本号格式错误'
    }
  return error
}

When I click checkbox, the console warning Failed prop type: Invalid prop hasFeedback of type object supplied to FormItem, expected boolean.

Thank u again ~

[liuguangsen0409]

There are 3 warnings and errors

// 1 
Warning: Failed prop type: Invalid prop `hasFeedback` of type `object` supplied to `FormItem`, expected `boolean`.
    in FormItem (created by Field)
    in Field (created by FormItem)
    in FormItem (created by Formik)
    in form (created by Context.Consumer)
    ...

// 2
Uncaught Error: Objects are not valid as a React child (found: object with keys {iosvalue}). If you meant to render a collection of children, use an array instead.
    in li (created by Field)
    in div (created by Context.Consumer)
    in AnimateChild (created by Animate)
    in Animate (created by Context.Consumer)
    ...

// 3
he above error occurred in the <li> component:
    in li (created by Field)
    in div (created by Context.Consumer)
    in AnimateChild (created by Animate)
    in Animate (created by Context.Consumer)
    ...

[jannikbuschke]

You have nested FormItems which probably does not work. remove the one with name="osVersion" and see if it works.

[liuguangsen0409]

If I remove the first <FormItem> name, typescript will warning me that name is required.

Now, I change osVersion.xx to osVersion_xx and change my data structor, it works out.

I also want to ask about this console warning, Warning: Failed prop type: Invalid prop hasFeedback of type object supplied to FormItem, expected boolean, is it about validation or something else?

Thank u again ~

[jannikbuschke]

to the first point: you should remove the outer FormItem altogether (not onlay remove the name). FormItems should not be nested. If you want to access nested form values, just use the dotnotation like <Form.Item name="nested.value"><Input name="nested.value"/></Form.Item>. There is just a single Form.Item...

To you second point: The warning might happend if there is something wrong with the validation error (I think it should be a string or array of strings). It might also be that you are not using the latest version. I would need a reproduction or more code to help you further.

[jannikbuschke]

@liuguangsen0409 has your issue been resolved?