#11625: Employ HTMX form rendering for device & VM interfaces

Author: jeremystretch

netbox/core/forms/model_forms.py

@@ -5,7 +5,7 @@
 from core.models import *
 from netbox.forms import NetBoxModelForm
 from netbox.registry import registry
-from utilities.forms import CommentField
+from utilities.forms import CommentField, get_field_value
 
 __all__ = (
     'DataSourceForm',
@@ -44,24 +44,19 @@ def fieldsets(self):
         ]
         if self.backend_fields:
             fieldsets.append(
-                ('Backend', self.backend_fields)
+                ('Backend Parameters', self.backend_fields)
             )
 
         return fieldsets
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        backend_classes = registry['data_backends']
-
-        if self.is_bound and self.data.get('type') in backend_classes:
-            type_ = self.data['type']
-        elif self.initial and self.initial.get('type') in backend_classes:
-            type_ = self.initial['type']
-        else:
-            type_ = self.fields['type'].initial
-        backend = backend_classes.get(type_)
+        # Determine the selected backend type
+        backend_type = get_field_value(self, 'type')
+        backend = registry['data_backends'].get(backend_type)
 
+        # Add backend-specific form fields
         self.backend_fields = []
         for name, form_field in backend.parameters.items():
             field_name = f'backend_{name}'

netbox/dcim/forms/common.py

@@ -3,6 +3,7 @@
 
 from dcim.choices import *
 from dcim.constants import *
+from utilities.forms.utils import get_field_value
 
 __all__ = (
     'InterfaceCommonForm',
@@ -23,6 +24,20 @@ class InterfaceCommonForm(forms.Form):
         label=_('MTU')
     )
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+
+        # Determine the selected 802.1Q mode
+        interface_mode = get_field_value(self, 'mode')
+
+        # Delete VLAN tagging fields which are not relevant for the selected mode
+        if interface_mode in (InterfaceModeChoices.MODE_ACCESS, InterfaceModeChoices.MODE_TAGGED_ALL):
+            del self.fields['tagged_vlans']
+        elif not interface_mode:
+            del self.fields['vlan_group']
+            del self.fields['untagged_vlan']
+            del self.fields['tagged_vlans']
+
     def clean(self):
         super().clean()
 

netbox/dcim/forms/model_forms.py

@@ -1367,6 +1367,13 @@ class Meta:
         ]
         widgets = {
             'speed': SelectSpeedWidget(),
+            'mode': forms.Select(
+                attrs={
+                    'hx-get': '.',
+                    'hx-include': '#form_fields input',
+                    'hx-target': '#form_fields',
+                }
+            ),
         }
         labels = {
             'mode': '802.1Q Mode',

netbox/netbox/views/generic/object_views.py

@@ -431,6 +431,12 @@ def get(self, request):
         form = self.initialize_form(request)
         instance = self.alter_object(self.queryset.model(), request)
 
+        # If this is an HTMX request, return only the rendered form HTML
+        if is_htmx(request):
+            return render(request, 'htmx/form.html', {
+                'form': form,
+            })
+
         return render(request, self.template_name, {
             'object': instance,
             'form': form,

netbox/project-static/dist/netbox.js

@@ -1,10 +1,9 @@
 import { initFormElements } from './elements';
 import { initSpeedSelector } from './speedSelector';
 import { initScopeSelector } from './scopeSelector';
-import { initVlanTags } from './vlanTags';
 
 export function initForms(): void {
-  for (const func of [initFormElements, initSpeedSelector, initScopeSelector, initVlanTags]) {
+  for (const func of [initFormElements, initSpeedSelector, initScopeSelector]) {
     func();
   }
 }

netbox/project-static/dist/netbox.js.map

@@ -17,7 +17,7 @@ <h5 class="offset-sm-3">{{ group }}</h5>
       {% endif %}
       {% for name in fields %}
         {% with field=form|getfield:name %}
-          {% if not field.field.widget.is_hidden %}
+          {% if field and not field.field.widget.is_hidden %}
             {% render_field field %}
           {% endif %}
         {% endwith %}

netbox/project-static/src/forms/index.ts

@@ -12,6 +12,7 @@
     'expand_alphanumeric_pattern',
     'expand_ipaddress_pattern',
     'form_from_model',
+    'get_field_value',
     'get_selected_values',
     'parse_alphanumeric_range',
     'parse_numeric_range',
@@ -113,6 +114,21 @@ def expand_ipaddress_pattern(string, family):
             yield ''.join([lead, format(i, 'x' if family == 6 else 'd'), remnant])
 
 
+def get_field_value(form, field_name):
+    """
+    Return the current bound or initial value associated with a form field, prior to calling
+    clean() for the form.
+    """
+    field = form.fields[field_name]
+
+    if form.is_bound:
+        if data := form.data.get(field_name):
+            if field.valid_value(data):
+                return data
+
+    return form.get_initial_for_field(field, field_name)
+
+
 def get_selected_values(form, field_name):
     """
     Return the list of selected human-friendly values for a form field