{"action":"created","issue":{"url":"https://api.github.com/repos/ant-design/ant-design/issues/9181","repository_url":"https://api.github.com/repos/ant-design/ant-design","labels_url":"https://api.github.com/repos/ant-design/ant-design/issues/9181/labels{/name}","comments_url":"https://api.github.com/repos/ant-design/ant-design/issues/9181/comments","events_url":"https://api.github.com/repos/ant-design/ant-design/issues/9181/events","html_url":"https://github.com/ant-design/ant-design/issues/9181","id":292644096,"number":9181,"title":"[Customized Form Controls] Add design convention: cloud have controlled property  `validator`.","user":{"login":"zheeeng","id":1303154,"avatar_url":"https://avatars0.githubusercontent.com/u/1303154?v=4","gravatar_id":"","url":"https://api.github.com/users/zheeeng","html_url":"https://github.com/zheeeng","followers_url":"https://api.github.com/users/zheeeng/followers","following_url":"https://api.github.com/users/zheeeng/following{/other_user}","gists_url":"https://api.github.com/users/zheeeng/gists{/gist_id}","starred_url":"https://api.github.com/users/zheeeng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zheeeng/subscriptions","organizations_url":"https://api.github.com/users/zheeeng/orgs","repos_url":"https://api.github.com/users/zheeeng/repos","events_url":"https://api.github.com/users/zheeeng/events{/privacy}","received_events_url":"https://api.github.com/users/zheeeng/received_events","type":"User","site_admin":false},"labels":[{"id":778617833,"url":"https://api.github.com/repos/ant-design/ant-design/labels/Component:%20Form","name":"Component: Form","color":"1d76db","default":false},{"id":222673731,"url":"https://api.github.com/repos/ant-design/ant-design/labels/Discussion","name":"Discussion","color":"006b75","default":false}],"state":"open","locked":false,"assignee":{"login":"benjycui","id":3580607,"avatar_url":"https://avatars0.githubusercontent.com/u/3580607?v=4","gravatar_id":"","url":"https://api.github.com/users/benjycui","html_url":"https://github.com/benjycui","followers_url":"https://api.github.com/users/benjycui/followers","following_url":"https://api.github.com/users/benjycui/following{/other_user}","gists_url":"https://api.github.com/users/benjycui/gists{/gist_id}","starred_url":"https://api.github.com/users/benjycui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benjycui/subscriptions","organizations_url":"https://api.github.com/users/benjycui/orgs","repos_url":"https://api.github.com/users/benjycui/repos","events_url":"https://api.github.com/users/benjycui/events{/privacy}","received_events_url":"https://api.github.com/users/benjycui/received_events","type":"User","site_admin":false},"assignees":[{"login":"benjycui","id":3580607,"avatar_url":"https://avatars0.githubusercontent.com/u/3580607?v=4","gravatar_id":"","url":"https://api.github.com/users/benjycui","html_url":"https://github.com/benjycui","followers_url":"https://api.github.com/users/benjycui/followers","following_url":"https://api.github.com/users/benjycui/following{/other_user}","gists_url":"https://api.github.com/users/benjycui/gists{/gist_id}","starred_url":"https://api.github.com/users/benjycui/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/benjycui/subscriptions","organizations_url":"https://api.github.com/users/benjycui/orgs","repos_url":"https://api.github.com/users/benjycui/repos","events_url":"https://api.github.com/users/benjycui/events{/privacy}","received_events_url":"https://api.github.com/users/benjycui/received_events","type":"User","site_admin":false}],"milestone":null,"comments":5,"created_at":"2018-01-30T03:48:25Z","updated_at":"2018-02-09T09:24:50Z","closed_at":null,"author_association":"CONTRIBUTOR","body":"### What problem does this feature solve?\r\nWhen designing a `Customized Form Controls`, we may pass value or defaultValue with a simple structure, but build a complicated data structure inside the `Control`. Applying custom validators on the customized control like [the official sample](https://ant.design/components/form/#components-form-demo-customized-form-controls) does, we have no way to dig out the deep details inner, can't re-use some validation methods the `Customized Control` defined and it's hard to predicate the exposed `value` is valid.\r\n\r\nThe new convention, make it possible that every time we trigger changes, we feed the prop `validator` with error messages. Each form validation occurrence, form instance collect these error messages.\r\nA variant of this convention is exposing `validator` property of `Customized Form Controls`, it will be call in validation occurrence through `ref` by form instance.\r\n\r\n### What does the proposed API look like?\r\n1. validator prop convention\r\n\r\n```\r\nclass CustomizedControl extends React.Component {\r\n    handleChange = (values) { // this values may be very complicated, but is parsed and easy to validate\r\n\r\n        // this is a converter for changing inner values to external values. Certainly, we also have converter to handle outside 'value' and 'defaultValue'.\r\n        const externalValues = this.converter(values)\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange(externalValues) // externalValues is simple for submitting.\r\n        }\r\n        if (this.props.validator) {   // proposal here! feed errors to validator prop while changing\r\n\r\n            // erro1Validator can easy validate innerValues\r\n            const error1 = this.erro1Validator(values) || [] \r\n            const error2 = this.error2Validator(values) || []\r\n\r\n            this.props.validator([error1, error2])\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n2. or a variant convention:\r\n\r\n```\r\nclass CustomizedControl extends React.Component {\r\n    validator = () => {  // proposal here! employ an instance method 'validator' or 'validate', return validation erros\r\n        const error1 = this.erro1Validator(this.state.values) || []\r\n        const error2 = this.error2Validator(this.state.values) || []\r\n\r\n        return [error1, error2]\r\n    }\r\n}\r\n```\r\n\r\n<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/ant-design/ant-design/issues/comments/364380433","html_url":"https://github.com/ant-design/ant-design/issues/9181#issuecomment-364380433","issue_url":"https://api.github.com/repos/ant-design/ant-design/issues/9181","id":364380433,"user":{"login":"zheeeng","id":1303154,"avatar_url":"https://avatars0.githubusercontent.com/u/1303154?v=4","gravatar_id":"","url":"https://api.github.com/users/zheeeng","html_url":"https://github.com/zheeeng","followers_url":"https://api.github.com/users/zheeeng/followers","following_url":"https://api.github.com/users/zheeeng/following{/other_user}","gists_url":"https://api.github.com/users/zheeeng/gists{/gist_id}","starred_url":"https://api.github.com/users/zheeeng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zheeeng/subscriptions","organizations_url":"https://api.github.com/users/zheeeng/orgs","repos_url":"https://api.github.com/users/zheeeng/repos","events_url":"https://api.github.com/users/zheeeng/events{/privacy}","received_events_url":"https://api.github.com/users/zheeeng/received_events","type":"User","site_admin":false},"created_at":"2018-02-09T09:24:50Z","updated_at":"2018-02-09T09:24:50Z","author_association":"CONTRIBUTOR","body":"@benjycui My proposal does not require data converting, use built-in(not-exposed, in this example, it is `this.validator`, which runs fast) to validate inner data structure, and then pass the validation error message to `this.props.validator`. A common form UX is error message display field is responsing for each value change event, e.g. an `email` form input is displaying invalidate message until the validation pass."}}
{"actor":{"display_login":"zheeeng"}}