title: In Ant Design "Rules" in the Form.Items of Form component are not working
body: <h2>I am trying to use the rules in the Form. Items but because of some  reason it is not supporting</h2>
  <p>NOTE: The number is not supporting but that is not an issue rules feature is not supporting at all.
  NOTE: I think because it is rendering a lot that is why rules are not getting applied.</p>
  <h2>Any help to solve the issue will be great.</h2>
  <ul>
  <li>Here is a form component Code</li>
  </ul>
  <pre><code>import React from 'react';
  import { Form, Button } from 'antd';
  import { component as Template } from '@ivoyant/component-template';
  
  class InputFormComponent extends React.Component {
      state = {
          formData: {},
      };
  
      enableInputFocus = (State, Props) =&gt; {
          const empty = {};
  
          const isObject = x =&gt; Object(x) === x;
  
          const diff1 = (left = {}, right = {}, rel = 'left') =&gt;
              Object.entries(left)
                  .map(([k, v]) =&gt;
                      isObject(v) &amp;&amp; isObject(right[k])
                          ? [k, diff1(v, right[k], rel)]
                          : right[k] !== v
                          ? [k, { [rel]: v }]
                          : [k, empty]
                  )
                  .reduce(
                      (acc, [k, v]) =&gt; (v === empty ? acc : { ...acc, [k]: v }),
                      empty
                  );
  
          const merge = (left = {}, right = {}) =&gt;
              Object.entries(right).reduce(
                  (acc, [k, v]) =&gt;
                      isObject(v) &amp;&amp; isObject(left[k])
                          ? { ...acc, [k]: merge(left[k], v) }
                          : { ...acc, [k]: v },
                  left
              );
  
          const diff = (x = {}, y = {}) =&gt;
              merge(diff1(x, y, 'left'), diff1(y, x, 'right'));
  
          const key = Object.keys(diff(State, Props))[0];
  
          for (const property in Props) {
              if (key == property) {
                  Props[property].focus = true;
              } else {
                  Props[property].focus = false;
              }
          }
  
          return Props;
      };
  
      onFinish = values =&gt; {
          const { formData } = this.state;
  
          global.console.log('Success: formData :', formData);
          
      };
  
      getDataFromFormItem = values =&gt; {
          const { formData } = this.state;
          const updatedValues = this.enableInputFocus(formData, values);
  
          this.setState({ formData: { ...formData, ...updatedValues } });
      };
  
      onFinishFailed = errorInfo =&gt; {
          global.console.log('Failed:', errorInfo);
      };
  
      render() {
          const { children, properties } = this.props;
          const {
              submitButtonText,
              formClassName,
              submitButtonClassNmae,
          } = properties;
          const { formData } = this.state;
  
          const childComponent = React.Children.map(children, child =&gt; {
              return React.cloneElement(child, {
                  sendDataToForm: this.getDataFromFormItem,
                  updateFormData: this.updateFormData,
                  values: { ...formData },
              });
          });
  
          return (
              &lt;div&gt;
                  &lt;Form
                      className={formClassName &amp;&amp; formClassName}
                      onFinish={this.onFinish}
                      onFinishFailed={this.onFinishFailed}
                  &gt;
                      {childComponent}
  
                      &lt;Form.Item&gt;
                          &lt;Button
                              type=&quot;primary&quot;
                              htmlType=&quot;submit&quot;
                              className={
                                  submitButtonClassNmae &amp;&amp; submitButtonClassNmae
                              }
                          &gt;
                              {submitButtonText &amp;&amp; submitButtonText}
                          &lt;/Button&gt;
                      &lt;/Form.Item&gt;
                  &lt;/Form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default InputFormComponent;
  </code></pre>
  <ul>
  <li>Below is the code for the Input field, which is a totally different component:</li>
  </ul>
  <pre><code>import React from 'react';
  import { Input, Form } from 'antd';
  
  class InputComponent extends React.Component {
      state = {
          formItemData: {},
      };
  
      componentDidMount() {
          const { values } = this.props;
          for (const property in values) {
              if (values[property].focus === true) {
                  this[property] &amp;&amp; this[property].focus();
              }
          }
  
          /**
           * Bellow code is use when we are not passing input component as a direct child of Form component
           */
          if (this.props.parentProps)
              for (const property in this.props.parentProps.values) {
                  if (this.props.parentProps.values[property].focus === true) {
                      this[property] &amp;&amp; this[property].focus();
                  }
              }
  
          /**
           * In Bellow code true condition is exected when we are not passing input component as a direct child of Form component
           */
          this.props.parentProps
              ? this.setState({
                    formItemData: { ...values, ...this.props.parentProps.values },
                })
              : this.setState({ formItemData: { ...values } });
      }
  
      handleOnChange = event =&gt; {
          const { formItemData } = this.state;
          const { id, value } = event.target;
  
          const ID = id;
          const object = {};
  
          object[ID] = {
              VALUE: value,
              focus: false,
          };
  
          this.setState(
              {
                  formItemData: { ...formItemData, ...object },
              },
              () =&gt; {
                  this.props.sendDataToForm &amp;&amp;
                      this.props.sendDataToForm(this.state.formItemData);
                  /**
                   * Bellow code is use when we are not passing input component as a direct child of Form component
                   */
                  this.props.parentProps &amp;&amp;
                      this.props.parentProps.sendDataToForm &amp;&amp;
                      this.props.parentProps.sendDataToForm(
                          this.state.formItemData
                      );
              }
          );
      };
  
      render() {
          const { id, className } = this.props.properties;
          const { values, children } = this.props;
          const { formItemData } = this.state;
  
          const { inputFieldsConfiguration } = this.props.properties;
  
          const childComponent = React.Children.map(children, child =&gt; {
              return React.cloneElement(child, {
                  parentProps: { ...this.props },
              });
          });
  
          return (
              &lt;div&gt;
                  &lt;div className={className &amp;&amp; className}&gt;
                      {inputFieldsConfiguration &amp;&amp;
                          // eslint-disable-next-line complexity
                          inputFieldsConfiguration.map(data =&gt; {
                              return (
                                  &lt;div
                                      className={data.itemAndInputClassName}
                                      key={data.id &amp;&amp; data.id}
                                  &gt;
                                      &lt;div className={data.labalClassName}&gt;
                                          {data.label &amp;&amp; data.label}
                                      &lt;/div&gt;
                                      &lt;Form.Item
                                          key={data.id}
                                          hasFeedback
                                          name={data.id}
                                          help={data.help &amp;&amp; data.help}
                                          className={
                                              data.formItemClassName &amp;&amp;
                                              data.formItemClassName
                                          }
                                          rules={[
                                              {
                                                  type: &quot;url&quot;,
                                               }
                                          ]}
                                      &gt;
                                          &lt;Input
                                              ref={input =&gt; {
                                                  this[data.id] = input;
                                              }}
                                              placeholder={
                                                  data.placeholder &amp;&amp;
                                                  data.placeholder
                                              }
                                              id={data.id &amp;&amp; data.id}
                                              disabled ={data.disabled &amp;&amp; data.disabled }
                                              value={
                                                  formItemData &amp;&amp;
                                                  formItemData[data.id] &amp;&amp;
                                                  formItemData[data.id].ID === ''
                                                      ? values &amp;&amp;
                                                        values[data.id] &amp;&amp;
                                                        values[data.id].VALUE
                                                      : formItemData &amp;&amp;
                                                        formItemData[data.id] &amp;&amp;
                                                        formItemData[data.id]
                                                            .VALUE
                                              }
                                              className={
                                                  data.inputItemClassName &amp;&amp;
                                                  data.inputItemClassName
                                              }
                                              onChange={e =&gt;
                                                  this.handleOnChange(e)
                                              }
                                          /&gt;
                                      &lt;/Form.Item&gt;
                                  &lt;/div&gt;
                              );
                          })}
                  &lt;/div&gt;
                  {childComponent}
              &lt;/div&gt;
          );
      }
  }
  
  export default InputComponent;
  
  </code></pre>