Ant-design: FormItem doesn't detect control input inside

Created on 28 Mar 2017 · 8Comments · Source: ant-design/ant-design

Environment

antd version: 2.7.4
OS and its version: OS X 10.12.3
Browser and its version: Chrome 56

What did you do? Please provide steps to re-produce your problem.

We wrap our form fields into their own component which contain their validation logic. Example

UsernameInput.js

class UsernameInput extends Component {
  render() {
    return this.props.form.getFieldDecorator(this.props.id, {
      rules: [...]
    })(InputComponent);
  }
}

And we want to use them in our forms like this

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        <UsernameInput form={this.props.form} />
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

This doesn't work because FormItem.getControls doesn't detect the component as a control. Just sees the wrapper as UsernameInput.

What do you expected?

FormItem to detect UsernameInput and work as any input control. Show error messages, feedback, helps, etc.

What happen?

FormItem doesn't find the control inside.

Inactive IssueHuntFest help wanted 🗣 Discussion

Source

gaastonsr

Most helpful comment

We solved this by calling the component as a function

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

But if you're open to ideas, I think a possible solution would be to define a context in the FormItem and the Input can register themselves when it's present. Example

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr on 30 Mar 2017

👍4

All 8 comments

It's difficult to solve this issue. Could you post your advice(how to implement) here if any?

benjycui on 29 Mar 2017

We solved this by calling the component as a function

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

But if you're open to ideas, I think a possible solution would be to define a context in the FormItem and the Input can register themselves when it's present. Example

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

Input.js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr on 30 Mar 2017

👍4

I will try to find a solution.

benjycui on 30 Mar 2017

@gaastonsr could u show your whole code about the UsernameInput with this workaround?

sbyps on 24 Nov 2017

@gaastonsr Your solution help me a lot!

Is this is a still valid issue? The context suggestion sounds good to me.

tomasfrancisco on 2 Aug 2018

👍1

Just ran into this today on [email protected]. Still an issue. @gaastonsr's function workaround is imo more elegant than requiring all form component's to check for context.

JonDum on 14 Oct 2018

Hello @gaastonsr. We totally like your proposal/feedback, welcome to send us Pull Request for it. Please send your Pull Request to proper branch (feature branch for new feature, master for bugfix and other changes), fill the [Pull Request Template] here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. Appreciate it advance and we are looking forword to your contribution!

你好 @gaastonsr, 我们完全同意你的提议/反馈，欢迎直接在此仓库创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献！

giphy