wire up server validation for properties on tabs

src/Umbraco.Web.UI.Client/src/common/directives/components/contenttype/umbcontenttypetab.component.js

@@ -81,7 +81,8 @@
       onFocusName: '&?',
       onFocus: '&?',
       onChangeSortOrderValue: '&?',
-      onChangeName: '&?'
+      onChangeName: '&?',
+      valServerFieldName: '@'
     },
     controller: umbContentTypeTabController
   };

src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js

@@ -28,6 +28,10 @@
                 scope.tabs = $filter("filter")(scope.model.groups, (group) => {
                     return group.type === TYPE_TAB;
                 });
+
+                scope.tabs.forEach(tab => {
+                    tab.indexInGroups = scope.model.groups.findIndex(group => group.key === tab.key);
+                });
             });
 
             function getFirstTab () {
@@ -391,7 +395,7 @@
 
             };
 
-            /* ---------- TABS ---------- */
+            /* ---------- TABS ---------- */            
             scope.changeTab = function ({key}) {
                 scope.openTabKey = key;
             };
@@ -449,15 +453,6 @@
                 scope.$broadcast('umbOverflowChecker.checkOverflow');
             };
 
-            scope.getTabServerFieldName = function (tab) {
-                if (!tab) {
-                    return;
-                }
-
-                const indexInGroup = scope.model.groups.findIndex(group => group.key === tab.key);
-                return `Groups[${indexInGroup}].Name`;
-            };
-
             scope.ungroupedPropertiesAreVisible = function({key, properties}) {
                 const isOpenTab = key === scope.openTabKey;
 

src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html

@@ -17,7 +17,7 @@
                             sorting="sortingMode"
                             allow-remove="canRemoveTab(tab) && !sortingMode"
                             on-remove="removeTab(tab)"
-                            val-server-field-name="{{ getTabServerFieldName(tab) }}"
+                            val-server-field-name="{{'Groups[' + tab.indexInGroups + '].Name'}}"
                             on-change-sort-order-value="onChangeTabSortOrderValue(tab)"
                             on-change-icon="onChangeTabIcon(icon, color, tab)"
                             on-change-name="onChangeTabName(name)">
@@ -90,8 +90,8 @@
                         sortable="sortingMode"
                         on-edit="editPropertyTypeSettings(property)"
                         on-remove="deleteProperty(tab.properties, property)"
-                        val-server-field-alias="{{'Groups[' + tabIndex + '].Properties[' + propertyIndex + '].Alias'}}"
-                        val-server-field-label="{{'Groups[' + tabIndex + '].Properties[' + propertyIndex + '].Label'}}"
+                        val-server-field-alias="{{'Groups[' + tab.indexInGroups + '].Properties[' + propertyIndex + '].Alias'}}"
+                        val-server-field-label="{{'Groups[' + tab.indexInGroups + '].Properties[' + propertyIndex + '].Label'}}"
                         on-change-sort-order-value="onChangePropertySortOrderValue(tab)">
                     </umb-content-type-property>
                 </li>