CODEWITHSUNDEEP
reactjsformsvalidationantd
Jane Fred
Jane Fred

Reputation: 1489

TypeError: Cannot read property 'validateFields' of undefined ReactJS

I have two pages addressForm.js and index.js. In addressForm.js page the code for Form is written. Sample code shown below.

<Col >
                    <div style={{'height': '45px','display':'flex'}}> 
                    <label style={{'color': '#f5222d', 'paddingTop': '10px','fontFamily': 'SimSun'}}>*</label>&nbsp;
                    <label style={{'width':'74px','paddingTop':'8px'}}>Customer Name:</label>                       
                        <FormItem >
                        {getFieldDecorator('Name', {
                        initialValue: '',
                        rules: [{
                            required: true, 
                            message: (
                              <Tooltip
                                visible={true} placement="topRight"
                                title="Please Input Customer Name"
                              />
                            ),
                        }],
                        })(
                        <Input placeholder="Customer Name" style={{'width':'164px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation();                                   
                            this.handleChange(0,e, 'Name')}}/>
                        )}                    
                    </FormItem>
                    </div>
                    </Col>

In the index.js page fuctions for the form is written (What to happen when the Submit button is clicked). Sample Code:

handleOk = () => {
    this.props.form.validateFields((err, values) => {
        if (!err) {
          /* Code.......*/
 }
    });
    }

The problem is that the validation is not working (ie.,validation checking is not done and I am getting this error).

Shall I import anything in index.js page to avoid the error?

Upvotes: 0

Views: 3427

Answers (3)

Rizwan
Rizwan

Reputation: 4433

you can solve this issue by trying this code:

class Devices extends React.Component {
   .................
}

Devices = Form.create({})(Devices);
export default Devices;

Upvotes: 1

Triyugi Narayan Mani
Triyugi Narayan Mani

Reputation: 3109

From the documentation, form should be decorated by Form.create.

If the form has been decorated by Form.create then it has this.props.form property.

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

Upvotes: 0

Hackstreet_Boy
Hackstreet_Boy

Reputation: 41

Something in your props is not being passed in or defined correctly, which is giving the TypeError. It looks like you might need to pass in props explicitly into your handleOk function - its hard to tell though with the snippets provided.

Upvotes: 0

Related Questions