From 4deceb43eb8ed269db56e1783d3289e71b78d536 Mon Sep 17 00:00:00 2001
From: Nikolaj Geisle <70372949+Zeegaan@users.noreply.github.com>
Date: Tue, 11 Oct 2022 15:57:01 +0200
Subject: [PATCH] V10: 13099 fix validation error (#13170)

* Add validation error message to Viewpicker

* Add help-inline class to make validation-text red

Co-authored-by: Zeegaan <nge@umbraco.dk>
---
 .../views/dataTypes/views/datatype.settings.html  |  8 ++++----
 .../macros/views/macro.settings.controller.js     |  8 ++++----
 .../src/views/macros/views/settings.html          | 15 ++++++++++-----
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/dataTypes/views/datatype.settings.html b/src/Umbraco.Web.UI.Client/src/views/dataTypes/views/datatype.settings.html
index b4422dc49e..f0eb5b535b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/dataTypes/views/datatype.settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/dataTypes/views/datatype.settings.html
@@ -8,9 +8,9 @@
 
                 <ng-form name="propertyEditorForm">
 
-                    <div 
-                        ng-model="model.content.selectedEditor" 
-                        name="selectedEditor" 
+                    <div
+                        ng-model="model.content.selectedEditor"
+                        name="selectedEditor"
                         val-require-component
                         class="umb-property-editor--limit-width">
 
@@ -23,7 +23,7 @@
                             ng-click="vm.openPropertyEditorPicker()">
                         </umb-button>
 
-                        <div ng-messages="propertyEditorForm.selectedEditor.$error" show-validation-on-submit>
+                        <div class="help-inline" ng-messages="propertyEditorForm.selectedEditor.$error" show-validation-on-submit>
                             <span ng-message="valRequiredComponent">
                                 <localize key="general_required">Required</localize>
                             </span>
diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/views/macro.settings.controller.js b/src/Umbraco.Web.UI.Client/src/views/macros/views/macro.settings.controller.js
index 5f633a6e4b..fd7889a7a6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/views/macro.settings.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/views/macro.settings.controller.js
@@ -14,11 +14,11 @@ function MacrosSettingsController($scope, editorService, localizationService) {
     //vm.removeMacroView = removeMacroView;
     $scope.model.openViewPicker = openViewPicker;
     $scope.model.removeMacroView = removeMacroView;
-
     var labels = {};
-
+    vm.macroPartialViewPickerProperty = { alias : "macroPartialViewPickerProperty", description: "", label: "Macro partial view", validation: {mandatory : true}}
     localizationService.localizeMany(["macro_selectViewFile"]).then(function(data) {
         labels.selectViewFile = data[0];
+        vm.macroPartialViewPickerProperty.description = data[0];
     });
 
     function openViewPicker() {
@@ -45,7 +45,7 @@ function MacrosSettingsController($scope, editorService, localizationService) {
                     name: $scope.model.macro.view
                 };
 
-                //$scope.model.submit($scope.model); 
+                //$scope.model.submit($scope.model);
 
                 editorService.close();
             },
@@ -63,7 +63,7 @@ function MacrosSettingsController($scope, editorService, localizationService) {
     }
 
     function init() {
-        
+
     }
 
     init();
diff --git a/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html b/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
index c152c33193..9b79061654 100644
--- a/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
+++ b/src/Umbraco.Web.UI.Client/src/views/macros/views/settings.html
@@ -5,10 +5,9 @@
         <div class="umb-package-details__main-content">
 
             <umb-box>
-                <umb-box-header title="Macro partial view"></umb-box-header>
                 <umb-box-content>
-                    <umb-control-group label="Macro partial view" required="true" hide-label="true">
-
+                  <umb-property property="vm.macroPartialViewPickerProperty">
+                      <ng-form  name="vm.macroPartialViewPickerForm">
                         <umb-node-preview
                             ng-if="model.macro.node"
                             icon="model.macro.node.icon"
@@ -19,7 +18,7 @@
                             on-remove="model.removeMacroView()">
                         </umb-node-preview>
 
-                        <input type="hidden" ng-model="mandatoryViewValidator" ng-required="!model.macro.node" />
+                        <input type="hidden" name="partialView" ng-model="mandatoryViewValidator" ng-required="!model.macro.node" />
 
                         <button type="button"
                                 class="umb-node-preview-add"
@@ -28,7 +27,13 @@
                             <localize key="general_add">Add</localize>
                         </button>
 
-                    </umb-control-group>
+                        <div class="help-inline" ng-messages="vm.macroPartialViewPickerForm.partialView.$error" show-validation-on-submit>
+                            <span ng-message="required">
+                                <localize key="general_required">Required</localize>
+                            </span>
+                        </div>
+                      </ng-form>
+                  </umb-property>
                 </umb-box-content>
             </umb-box>
             <umb-box>