Create object fields dynamically

[anuj9196]

Is your feature request related to a problem? Please describe.
The use case is that I want to add object fields (not array fields) dynamically. The fields will vary based on condition that is why want to create it dynamically when required.

I have tried the following

export function OptionsCard({ type }: { type?: 'multiple-choice'|'checkbox' }) {
  const { control, setValue, watch, trigger } = useFormContext();

  const { fields, append, remove, move } = useFieldArray({
    control,
    name: "answer_data.data",
  });

  // ✅ Initialize `answer_data` properly using useEffect
  useEffect(() => {
    console.log('updating answer data...');
    if (!watch("answer_data")) {
      console.log('adding answer data...');
      setValue("answer_data", { data: [], config: { minSelections: 1 } }, { shouldValidate: true });
    }
  }, [watch, setValue]);

  const options = watch("answer_data.data") || [];

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;

    if (over && active.id !== over.id) {
        const oldIndex = fields.findIndex((field) => field.id === active.id);
        const newIndex = fields.findIndex((field) => field.id === over.id);
        move(oldIndex, newIndex);
    }
  };

  const addGroup = () => {
    console.log('adding group....');
    append(''); // ✅ Ensure new option has a valid structure
    trigger("answer_data.data");
  };

  const onOptionTemplateSelect = (options: string[]) => {
    console.log('options...: ', options);
    console.log('form...: ', control);
  }

  return (
    <Card>
      <CardHeader className="p-4 flex flex-row items-center justify-between">
        <CardTitle>Add Option</CardTitle>
        <OptionsTemplate onSelectAction={onOptionTemplateSelect} />
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <DndContext
            sensors={sensors}
            collisionDetection={closestCenter}
            onDragEnd={handleDragEnd}
          >
            <SortableContext items={fields.map((field) => field.id)} strategy={verticalListSortingStrategy}>
              <div className="space-y-4 w-full">

                { fields.map((field, i ) => (
                  <DraggableInput
                    key={field.id}
                    id={field.id}
                    index={i}
                    onRemoveAction={remove}
                    control={control} type={type} />
                ))}
              </div>
            </SortableContext>

          </DndContext>

          <div className="flex justify-center mt-4">
            <Button
              type="button"
              onClick={addGroup}
              variant="outline"
              className="flex items-center gap-2">
              <PlusCircle className="w-4 h-4" />
              Add Option
            </Button>
          </div>
        </div>

        <Separator />

        <div className="space-y-3">
          <Label className="font-semibold text-gray-500">Configuration</Label>
          <div className="grid grid-cols-2">

            <FormField
              control={control}
              name="answer_data.config.minSelections"
              render={({field}) => (
                <FormItem>
                  <FormLabel>Min Required</FormLabel>
                  <FormControl>
                    <FormControl>
                      <Input type="number" min={0} max={options.length} placeholder="Min selections" {...field} />
                    </FormControl>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

          </div>
        </div>

      </CardContent>
    </Card>
  )
}

In the above code, answer_data.data is being added however the config.minSelections is not adding to the form.

Printing the values after form submit contains the answer_data.data but not answer_data.config.minSelections

{
    "question": "Question 1",
    "description": "",
    "is_required": false,
    "question_type": "multiple-choice",
    "answer_data": {
        "data": [
            "Option 1",
            "Option 2"
        ]
    }
}

Describe the solution you'd like
Ability to add dynamic field objects to the form and remove them as required

Describe alternatives you've considered
Yet exploring alternatives.

Additional context
Using

"react-hook-form": "^7.54.2"

[BrendanC23]

Can you provide an example CodeSandbox that demonstrates the issue?

Also, why are you setting answer_data within a useEffect? Can this be set in the form default values or in an event handler instead?