title: How to validate form fileds in multi step for ant design and react?
body: <p>I'm creating multi step form with ant design and I need to validate my form fields in each step before going next step.</p>
  <p>I remove some codes and bellow is the summery of my code:</p>
  <p>my App.js code:</p>
  <pre><code>import { Button, Steps, Modal, Result } from &quot;antd&quot;;
  import React, { Component } from &quot;react&quot;;
  import AmountStep from &quot;../components/AmountStep&quot;;
  
  const { Step } = Steps;
  const steps = [
    {
      title: &quot;Amount&quot;,
      content: &lt;AmountStep /&gt;,
      fields: [&quot;amount&quot;]
    },
    {
      title: &quot;Recipient&quot;,
      content: &lt;RecipientStep /&gt;,
      fields: [&quot;name&quot;, &quot;family&quot;]
    },
    {
      title: &quot;Verification&quot;,
      content: &lt;Verification /&gt;
    },
    {
      title: &quot;Review&quot;,
      content: &lt;Review /&gt;
    }
  ];
  
  class App extends Component {
    state = {
      current: 0,
    };
  
    render() {
      // const user = this.props.user;
      return (
        &lt;&gt;
          &lt;div className=&quot;steps-container&quot;&gt;
                    &lt;Steps current={this.state.current} form={this.props.form}&gt;
                      {steps.map(item =&gt; (
                        &lt;Step key={item.title} title={item.title} /&gt;
                      ))}
                    &lt;/Steps&gt;
                    &lt;div className=&quot;steps-content&quot;&gt;
                      {steps[this.state.current].content}
                    &lt;/div&gt;
                    &lt;div className=&quot;steps-action&quot;&gt;
                      {this.state.current &gt; 0 &amp;&amp; (
                        &lt;Button
                          style={{
                            margin: &quot;0 8px&quot;
                          }}
                          onClick={this.prev}
                        &gt;
                          Previous
                        &lt;/Button&gt;
                      )}
                      {this.state.current &lt; steps.length - 1 &amp;&amp; (
                        &lt;Button type=&quot;primary&quot; onClick={this.next}&gt;
                          Next
                        &lt;/Button&gt;
                      )}
                      {this.state.current === steps.length - 1 &amp;&amp; (
                        &lt;Button type=&quot;primary&quot;&gt;
                          Confirm
                        &lt;/Button&gt;
                      )}
                    &lt;/div&gt;
                  &lt;/div&gt;
        &lt;/&gt;
      );
    }
  
    next = async () =&gt; {
      try {
        const validate = await form.validateFields([&quot;amount&quot;]);
        this.setState({ current: this.state.current + 1 });
      } catch {
  //return some msg...
      }
    };
    prev = () =&gt; {
      this.setState({ current: this.state.current - 1 });
  
    };
  }
  
  export { App };
  </code></pre>
  <p>and AmountStep component:</p>
  <pre><code>import { Row, InputNumber, Form } from &quot;antd&quot;;
  import &quot;antd/dist/antd.css&quot;;
  import React, { Component } from &quot;react&quot;;
  
  class AmountStep extends Component {
  
    render() {
      return (
        &lt;&gt;
          &lt;Row className=&quot;form-container recipient-step&quot;&gt;
            &lt;h2 className=&quot;form-title&quot;&gt;amount&lt;/h2&gt;
            &lt;Form name=&quot;recipient-form&quot; layout=&quot;vertical&quot;&gt;
              &lt;div className=&quot;amount&quot;&gt;
                &lt;Form.Item
                  name=&quot;amount&quot;
                  label=&quot;Amount:&quot;
                  rules={[
                    {
                      required: true,
                      message: &quot;Please input your Amount!&quot;
                    }
                  ]}
                &gt;
                  &lt;InputNumber
                    style={{ width: &quot;100%&quot; }}
                    name=&quot;amount&quot;
                    min={50}
                  /&gt;
                &lt;/Form.Item&gt;
              &lt;/div&gt;
            &lt;/Form&gt;
          &lt;/Row&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default AmountStep;
  </code></pre>
  <p>it get error that <code>form</code> is not defined in <code>form.validateFields([&quot;amount&quot;]);</code>.</p>
  <p>How can I validate the amount field in first step before going next step.</p>