Support model choice fields

Author: Archmonger

src/reactpy_django/forms/components.py

@@ -1,9 +1,10 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable
+from typing import TYPE_CHECKING, Any, Callable, Union, cast
 from uuid import uuid4
 
+from channels.db import database_sync_to_async
 from django.forms import Form
 from reactpy import component, hooks, html, utils
 from reactpy.core.events import event
@@ -50,6 +51,7 @@ def _django_form(
     top_children_count = hooks.use_ref(len(top_children))
     bottom_children_count = hooks.use_ref(len(bottom_children))
     submitted_data, set_submitted_data = hooks.use_state({} or None)
+    rendered_form, set_rendered_form = hooks.use_state(cast(Union[str, None], None))
     uuid = uuid_ref.current
 
     # Don't allow the count of top and bottom children to change
@@ -69,39 +71,50 @@ def _django_form(
             raise TypeError(msg) from e
         raise
 
-    # Run the form validation, if data was provided
-    if submitted_data:
-        initialized_form.full_clean()
-        success = not initialized_form.errors.as_data()
-        form_event = FormEvent(form=initialized_form, data=submitted_data or {})
-        if success and on_success:
-            on_success(form_event)
-        if not success and on_error:
-            on_error(form_event)
+    # Set up the form event object
+    form_event = FormEvent(form=initialized_form, data=submitted_data or {})
+
+    # Validate and render the form
+    @hooks.use_effect
+    async def render_form():
+        """Forms must be rendered in an async loop to allow database fields to execute."""
+        if submitted_data:
+            await database_sync_to_async(initialized_form.full_clean)()
+            success = not initialized_form.errors.as_data()
+            if success and on_success:
+                on_success(form_event)
+            if not success and on_error:
+                on_error(form_event)
+
+        set_rendered_form(await database_sync_to_async(initialized_form.render)(form_template))
 
     def _on_change(_event):
         if on_change:
-            on_change(FormEvent(form=initialized_form, data=submitted_data or {}))
+            on_change(form_event)
 
     def on_submit_callback(new_data: dict[str, Any]):
         """Callback function provided directly to the client side listener. This is responsible for transmitting
         the submitted form data to the server for processing."""
         convert_multiple_choice_fields(new_data, initialized_form)
         convert_boolean_fields(new_data, initialized_form)
 
+        if on_submit:
+            on_submit(FormEvent(form=initialized_form, data=new_data))
+
         # TODO: The `use_state`` hook really should be de-duplicating this by itself. Needs upstream fix.
         if submitted_data != new_data:
-            if on_submit:
-                on_submit(FormEvent(form=initialized_form, data=new_data))
             set_submitted_data(new_data)
 
+    if not rendered_form:
+        return None
+
     return html.form(
         {"id": f"reactpy-{uuid}", "onSubmit": event(lambda _: None, prevent_default=True), "onChange": _on_change}
         | extra_props,
         DjangoForm({"onSubmitCallback": on_submit_callback, "formId": f"reactpy-{uuid}"}),
         *top_children,
         utils.html_to_vdom(
-            initialized_form.render(form_template),
+            rendered_form,
             convert_html_props_to_reactjs,
             convert_textarea_children_to_prop,
             set_value_prop_on_select_element,

src/reactpy_django/forms/utils.py

@@ -1,11 +1,13 @@
 from typing import Any
 
-from django.forms import BooleanField, Form, MultipleChoiceField, NullBooleanField
+from django.forms import BooleanField, Form, ModelMultipleChoiceField, MultipleChoiceField, NullBooleanField
 
 
 def convert_multiple_choice_fields(data: dict[str, Any], initialized_form: Form) -> None:
     multi_choice_fields = {
-        field_name for field_name, field in initialized_form.fields.items() if isinstance(field, MultipleChoiceField)
+        field_name
+        for field_name, field in initialized_form.fields.items()
+        if isinstance(field, (MultipleChoiceField, ModelMultipleChoiceField))
     }
 
     # Convert multiple choice field text into a list of values

tests/test_app/forms/forms.py

@@ -36,4 +36,10 @@ class BasicForm(forms.Form):
         label="combo", fields=[forms.CharField(), forms.EmailField()], initial="example@gmail.com"
     )
     password_field = forms.CharField(label="password", widget=forms.PasswordInput)
+    model_choice_field = forms.ModelChoiceField(
+        label="model choice field", initial="1", queryset=models.TodoItem.objects.all()
+    )
+    model_multiple_choice_field = forms.ModelMultipleChoiceField(
+        label="model multiple choice field", initial="1", queryset=models.TodoItem.objects.all()
+    )