Add unsaved fields to FormBuilder.formfields with clean name as key

fixes #6555,
Only the final unsaved FormField appears in the preview of a FormPage. As
FormBuilder adds fields to its formfields attribute using their
clean_name as the key, and FormField.clean_name isn't populated until
FormField.save is called, all unsaved fields are added to the
FormBuilder.formfields dict with the empty string as key. This solves
this by calling get_field_clean_name on the field before insertion
into formfields if clean_name hasn't been set yet.

CHANGELOG.txt

@@ -13,6 +13,7 @@ Changelog
  * Remove UI code for legacy browser support: polyfills, IE11 workarounds, Modernizr (Thibaud Colas)
  * Remove redirect auto-creation recipe from documentation as this feature is now supported in Wagtail core (Andy Babic)
  * Fix: When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
+ * Fix: When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
 
 
 2.16.2 (xx.xx.xxxx) - IN DEVELOPMENT

CONTRIBUTORS.rst

@@ -561,6 +561,7 @@ Contributors
 * Vladimir Tananko
 * Rizwan Mansuri
 * Dennis McGregor
+* Joshua Munn
 
 Translators
 ===========

docs/releases/2.17.md

@@ -29,6 +29,7 @@ Here are other changes related to the redesign:
 
  * Update django-treebeard dependency to 4.5.1 or above (Serafeim Papastefanos)
  * When using `simple_translations` ensure that the user is redirected to the page edit view when submitting for a single locale (Mitchel Cabuloy)
+ * When previewing unsaved changes to `Form` pages, ensure that all added fields are correctly shown in the preview (Joshua Munn)
 
 
 ## Upgrade considerations

wagtail/contrib/forms/forms.py

@@ -108,7 +108,12 @@ class FormBuilder:
         for field in self.fields:
             options = self.get_field_options(field)
             create_field = self.get_create_field_function(field.field_type)
-            formfields[field.clean_name] = create_field(field, options)
+
+            # If the field hasn't been saved to the database yet (e.g. we are previewing
+            # a FormPage with unsaved changes) it won't have a clean_name as this is
+            # set in FormField.save.
+            clean_name = field.clean_name or get_field_clean_name(field.label)
+            formfields[clean_name] = create_field(field, options)
 
         return formfields
 

wagtail/contrib/forms/tests/test_forms.py

@@ -3,6 +3,7 @@ from django import forms
 from django.test import TestCase
 
 from wagtail.contrib.forms.forms import FormBuilder
+from wagtail.contrib.forms.utils import get_field_clean_name
 from wagtail.core.models import Page
 from wagtail.tests.testapp.models import (
     ExtendedFormField,
@@ -195,6 +196,32 @@ class TestFormBuilder(TestCase):
             form_class.base_fields["a_hidden_field"].widget, forms.HiddenInput
         )
 
+    def test_unsaved_fields_in_form_builder_formfields(self):
+        """Ensure unsaved FormField instances are added to FormBuilder.formfields dict
+        with a clean_name as the key.
+        """
+        unsaved_field_1 = FormField(
+            page=self.form_page,
+            sort_order=14,
+            label="Unsaved field 1",
+            field_type="singleline",
+            required=True,
+        )
+        self.form_page.form_fields.add(unsaved_field_1)
+
+        unsaved_field_2 = FormField(
+            page=self.form_page,
+            sort_order=15,
+            label="Unsaved field 2",
+            field_type="singleline",
+            required=True,
+        )
+        self.form_page.form_fields.add(unsaved_field_2)
+
+        fb = FormBuilder(self.form_page.get_form_fields())
+        self.assertIn(get_field_clean_name(unsaved_field_1.label), fb.formfields)
+        self.assertIn(get_field_clean_name(unsaved_field_2.label), fb.formfields)
+
 
 class TestCustomFormBuilder(TestCase):
     def setUp(self):