REdux Form : Display fields upon condition

Question

Let's say I've a redux form something like this.

    {!this.state.username &&
      <div>
        <label>Username </label>
        <div>
          <input type="text" placeholder="eg. Shantanu Anand" {...username}/>
        </div>
       {username.touched && username.error && <div className = 'inputError'>{username.error}</div>}
      </div>
    }
    <div>
      <label>Phone Number</label>
      <div>
        <input placeholder="000-000-000" type="text"  {...phone} defaultValue="Hello!"/>
        {phone.touched && phone.error && <div className = 'inputError'>{phone.error}</div>}
      </div>
    </div>

Now the phone field is always there while the fullName field is dynamic based on certain condition check.

My form submit is something like this:

      <button className = 'registerFormBtn' type="submit" onClick={this.handleSubmit.bind(this)} disabled={submitting}>
        {submitting ? <i/> : <i/>} Submit
      </button>

Inside my handleSubmit function, I've:

if(_this.props.valid){
    //if all fields are valid.
   //my logic for form data posting, 
 }

Now, what I want is based on the conditions I want the validation to work. If only phone is render do validation check only for phone field. if both rendered - validation for both.

I've given a condition for the username field, which depending upon the condition sometimes renders and sometimes not.

But when it does not render, upon form submit I'm not able to move inside the if condition cause the username is being validated though it is not rendered.

Now, How do I avoid this validation based on my need.

Erik R. Erik R. · Accepted Answer · 2016-07-07T13:19:11

In v6, only fields that are rendered will be validated.

However, you should find that the props are passed as the second parameter to your validation function, so the information you seek to test your condition on might be in there.

REdux Form : Display fields upon condition

1 Answers