score:0

we had the same issue with redux-form 8.2.6 and @types/redux-form 8.1.5.

but no longer a problem after upgrading to redux-form 8.3.8, @types/redux-form 8.3.5.

score:8

i found the solution. i'm leaving the answer in case anyone had the same problem as me.

import * as react from 'react';
import { field, fieldarray, reduxform, wrappedfieldprops, wrappedfieldarrayprops, injectedformprops, genericfieldarray } from 'redux-form';
import validate from './validate';

interface customfieldprops {
  type?: string;
}

const fieldarraycustom = fieldarray as new () => genericfieldarray<field, any>;

const renderfield = (props: wrappedfieldprops & customfieldprops) => {
  const { touched, error } = props.meta;
  const { input, label, type } = props;

  return (
    <div>
      <label>{label}</label>
      <div>
        <input {...input} type={type} placeholder={label} />
        {touched && error && <span>{error}</span>}
      </div>
    </div>
  )
}

const renderhobbies = (props: wrappedfieldarrayprops<undefined>) => {
  const { fields } = props;
  const { error } = props.meta;

  return (
    <ul>
      <li>
        <button type="button" onclick={() => fields.push(undefined)}>
          add hobby
        </button>
      </li>
      {fields.map((hobby, index) => (
        <li key={index}>
          <button
            type="button"
            title="remove hobby"
            onclick={() => fields.remove(index)}
          />
          <field
            name={hobby}
            type="text"
            component={renderfield}
            label={`hobby #${index + 1}`}
          />
        </li>
      ))}
      {error && <li classname="error">{error}</li>}
    </ul>
  )
}

const rendermembers = (props: wrappedfieldarrayprops<{}>) => {
  const { fields } = props;
  const { error, submitfailed } = props.meta;

  return (
    <ul>
      <li>
        <button type="button" onclick={() => fields.push({})}>
          add member
        </button>
        {submitfailed && error && <span>{error}</span>}
      </li>
      {fields.map((member, index) => (
        <li key={index}>
          <button
            type="button"
            title="remove member"
            onclick={() => fields.remove(index)}
          />
          <h4>member #{index + 1}</h4>
          <field
            name={`${member}.firstname`}
            type="text"
            component={renderfield}
            label="first name"
          />
          <field
            name={`${member}.lastname`}
            type="text"
            component={renderfield}
            label="last name"
          />
          <fieldarraycustom name={`${member}.hobbies`} component={renderhobbies} />
        </li>
      ))}
    </ul>
  )
}

const fieldarraysform = (props: injectedformprops) => {
  const { handlesubmit, pristine, reset, submitting } = props

  return (
    <form onsubmit={handlesubmit}>
      <field
        name="clubname"
        type="text"
        component={renderfield}
        label="club name"
      />
      <fieldarraycustom name="members" component={rendermembers} />
      <div>
        <button type="submit" disabled={submitting}>
          submit
        </button>
        <button type="button" disabled={pristine || submitting} onclick={reset}>
          clear values
        </button>
      </div>
    </form>
  )
}

export default reduxform({
  form: 'fieldarrays', // a unique identifier for this form
  validate
})(fieldarraysform)

Related Query

More Query from same tag