Validating ReduxForm: Nested Values

Question

I have validatioin in ReduxForm working until I have to validate a field whose name is nested ie: location.coordinates[0].

This data looks like such in the Redux Store:

"location" : {
    "type" : "Point",
    "coordinates" : [ 
        103.8303, 
        4.2494
    ]
},

When trying to validate such fields using

Approach 1

if (!values.location.coordinates[0]) {
    errors.location.coordinates[0] = 'Please enter a longtitude';
}

I am getting error:

TypeError: Cannot read property 'coordinates' of undefined

Approach 2

if (values.location !== undefined) {
    errors.location.coordinates[0] = 'Please enter a longtitude';
    errors.location.coordinates[1] = 'Please enter a latitude';
}

I am getting error:

TypeError: Cannot read property 'coordinates' of undefined

Question: What is the proper way to handle such fields?

/src/containers/Animals/AnimalForm.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    render() {
        return (
            <div>
                <form onSubmit={ this.props.handleSubmit }                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                        />                      
                        <Field
                            label="Latitude"
                            name="location.coordinates[1]"
                            component={renderTextField}
                            type="text"
                        />   
                </form>
            </div>
        )
    }

}

const validate = values => {
    let errors = {}

    if (values.location !== undefined) {
        errors.location.coordinates[0] = 'Please enter a longtitude';
        errors.location.coordinates[1] = 'Please enter a latitude';
    }
    if ((values.location !== undefined) && (values.location.coordinates !== undefined)) {
        errors.location.coordinates[0] = 'Please enter a longtitude';
        errors.location.coordinates[1] = 'Please enter a latitude';
    }

    return errors;
}

function mapStateToProps(state) {
    return { ... }
}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal',
    validate
})(AnimalForm))

/src/containers/Animals/FormHelper.js

import React from 'react';
import { FormGroup, Label, Input, Alert } from 'reactstrap';

export const renderTextField = ({input, type, meta: {touched, error}, ...custom}) => (
    <div>
            <Label>{ label }</Label>
            <Input
                type={type}
                value={input.value}
                onChange={input.onChange}
            />
            {touched && error && <Alert color="warning">{ error }</Alert>}
    </div>
)

Oreoluwa Aboluwarin · Accepted Answer · 2018-10-04 15:39:32Z

2

In the validate method, how about structuring the initial errors object as such:

let errors = {
  location: {
    coordinates: []
  }
}

answered Oct 4, 2018 at 15:39

Oreoluwa Aboluwarin

1811 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemadri Dasari · Accepted Answer · 2018-10-04 15:58:20Z

0

The below solution would work

const validate = values => {
    let errors = values;
    if(values){
        if (values.location) {
           errors.location.coordinates[0] = 'Please enter a longtitude';
           errors.location.coordinates[1] = 'Please enter a latitude';
        }
    }
        return errors;
 }

edited Oct 4, 2018 at 15:58

answered Oct 4, 2018 at 15:22

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

2 Comments

Nyxynyx Over a year ago

We have let errors = {} at the beginning of the validation function which is passed the values variable. Should we not check the values variable in the validation function?

Hemadri Dasari Over a year ago

@Nyxynyx Sorry I misunderstood your question. I have updated my answer now please give a try

Collectives™ on Stack Overflow

Validating ReduxForm: Nested Values

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related