Creating a list of checkboxes with a toggle

[janjaap]

I've been looking through the documentation as wel as the examples and the source code, but there's something I can't figure out and that is how to have a group of checkboxes that I can all check or uncheck by the click of a button.

I have the following:

const cfg = {
  address: '',
  priority: '',
  state: FormBuilder.array([]),
};

const filterForm = FormBuilder.group(cfg);

In my component's constructor:

  this.props.statusList.forEach((status) => { // statusList is an array of objects with props 'key' and 'value'
   filterForm.get('sstate').push(FormBuilder.control(status));
  });

And in my render() function:

<FieldGroup
  control={this.filterForm}
  render={({ invalid }) => (
  <FieldArray
      render={({ controls }) => {
        return (
          <Fragment>
            <button type="button" onClick={() => { }}> // toggle button
              Alles
            </button>

            {controls.map((statusControl, index) => {
              return (
                <FieldControl
                  key={`${statusControl}${index}`} // eslint-disable-line
                  control={statusControl}
                  render={({ handler, parent, setValue, stateChanges }) => {
                    const { key, value } = handler().value;

                    return (
                      <div key={key}>
                        <input
                          id={`${name}-${key}`}
                          name="state"
                          type="checkbox"
                          value={key}
                        />

                        <label htmlFor={`${name}-${key}`}>
                          {value}
                        </label>
                      </div>
                    );
                  }}
                />
              );
            })}
          </Fragment>
        );
      }}
      name="state"
    />
  )}
/>

Two issues here:

• when I submit the form, I don't see the value for the checked boxes; I see all the values for all of them
• the onClick handler that I want to toggle all of the boxes doesn't seem to work with React's useState hook

How can I solve both issues mentioned? Feedback greatly appreciated.

[bietkul]

In my component's constructor:

  this.props.statusList.forEach((status) => { // statusList is an array of objects with props 'key' and 'value'
   filterForm.get('sstate').push(FormBuilder.control(status));
  });

Hey, it seems like a typo, sstate should be state. Let me know if doesn't resolve the issue, a code sandbox link with the issue will be more helpful to debug.

[janjaap]

Was definitely a typo. I'll set up a sandbox.

[janjaap]

Link to the sandbox: https://codesandbox.io/s/young-morning-gv0ss?fontsize=14

[bietkul]

Ideally, it should be implemented in that way here

[janjaap]

I see. I was hoping the result would be similar to what FormData would provide, but I guess this'll work too. Thanks.

[bietkul]

Right, but it won't create the controls automatically. If you wanna use some automatic stuff with less code, you can try FormGenerator API.