TypeError: Cannot read property 'validateFields' of undefined ReactJS

Question

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?

TypeError: Cannot read property 'validateFields' of undefined ReactJS — Jane Fred, Dec 06 '18 at 06:47
this.props.form is undefined. Can you check this...https://stackoverflow.com/questions/41296668/reactjs-form-input-validation — sandy, Dec 06 '18 at 06:53

score 1 · Answer 1 · answered Feb 17 '19 at 00:45

1

you can solve this issue by trying this code:

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

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

answered Feb 17 '19 at 00:45

Rizwan

3,741
2
25
22

score 0 · Answer 2 · answered Dec 06 '18 at 06:59

0

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.

answered Dec 06 '18 at 06:59

Hackstreet_Boy

41
6

score 0 · Answer 3 · answered Dec 06 '18 at 07:35

0

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);

answered Dec 06 '18 at 07:35

Triyugi Narayan Mani

3,039
8
36
56

TypeError: Cannot read property 'validateFields' of undefined ReactJS

3 Answers3