mandatory umb property editor - Umbraco 9

Johannes Lantz 156 posts 839 karma points c-trib

Nov 01, 2021 @ 23:32

Mandatory umb-property-editor

Hi!

I have created a custom section with a form. The form contains a textbox and a datepicker. I am trying to make them both mandatory. But it seems like only the textbox is being correctly validated. Eg.

enter image description here

I am not quite sure on what is going on here. I have also tried replacing the datepicker with an other textbox. But still no luck.

enter image description here

I have also tried using the <umb-date-time-picker></umb-date-time-picker> directive. But I can't figure out how I would go about making it mandatory.

My view looks like this:

   <umb-property property="property" ng-repeat="property in  properties">
      <umb-property-editor model="property"></umb-property-editor>
   </umb-property>

   <umb-button type="submit"
      button-style="success"
      state="vm.buttonState"
      label-key="buttons_save"
      action="vm.save(formName)">
   </umb-button>
</form>

And my controller:

                $scope.properties = [
                {
                    alias: "message",
                    label: "Message",
                    view: "textbox",
                    validation: {
                        mandatory: true,
                        //pattern: ""
                    }
                },
                {
                    alias: "showUntil",
                    label: "Show until",
                    hideLabel: false,
                    view: "textbox",
                    config: {
                        pickTime: false,
                        format: "YYYY-MM-DD",
                    },
                    validation: {
                        mandatory: true,
                        //pattern: ""
                    }
                },
            ];
        vm.save = function (formName) {

            vm.buttonState = "busy";

            if (formHelper.submitForm({ scope: $scope, formCtrl: formName })) {    
                console.log(formName)        
            } else {
                vm.buttonState = "error";
            }
        };

I have read the api docs, but there is not much information here. And I am not quite sure on what I should look after.

Has anyone else also encountered this, or know how to fix/workaround this? Would love some feedback on this!

Thanks!

//Johannes

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Nov 02, 2021 @ 08:26

Hi Johannes

It doesn't look like you are using datepicker property editor in your second property "Show until".

If you use <umb-date-time-picker> component you need to specify the configuration as shown in docs here: https://apidocs.umbraco.com/v9/ui/#/api/umbraco.directives.directive:umbDateTimePicker

But if you use the properties via <umb-property-editor> the config object is not always the same, e.g. for slider property editor vs <umb-range-slider> component.

However regarding configuration in datepicker property editor it should extend the default config: https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/src/views/propertyeditors/datepicker/datepicker.controller.js#L26-L27

Copy Link

Johannes Lantz 156 posts 839 karma points c-trib

Nov 02, 2021 @ 09:53

Hi Bjarne!

When I tired using <umb-date-time-picker>. I configured it according to the docs, but unsure how I make it mandatory though... Could you give an example?

Regarding the <umb-property-editor>. I am using the datepicker for "showUntil" I just forgot to change it when i pasted it in. Here is how to looks:

                {
                alias: "showUntil",
                label: "Show until",
                hideLabel: false,
                view: "datepicker",
                config: {
                    pickTime: false,
                    format: "YYYY-MM-DD",
                },
                validation: {
                    mandatory: true,
                    //pattern: ""
                }

And here I confugure <umb-property-editor> in 2 different ways. 1 for textbox & 1 for datetime. I just found it interesting that this happens no matter if the form contains 2 textbox or 1 textbox & 1 datepicker. The same validation error is happening.

I would like to use datepicker with <umb-property-editor> if possible. Since it mostly works out of the box. But if i use <umb-date-time-picker> I would get no label & calendar icon. So a bit of extra work here.

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Nov 02, 2021 @ 14:58

The <umb-date-time-picker> component itself doesn't have a mandatory property, but you could use the component in various part of the backoffice: dashboard, property editor, prevalue editor etc.

The logic seems to be correct:

<umb-property property="property" ng-repeat="property in properties">
     <umb-property-editor model="property"></umb-property-editor>
</umb-property>

And the validation should be a validation object with a mandatory property:

https://github.com/umbraco/Umbraco-CMS/blob/v9/contrib/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js#L47

I think you may need to set editor property as well.

I recall I did something similar to this in v7 or v8: https://stackoverflow.com/a/33093259/1693918

Copy Link

Johannes Lantz 156 posts 839 karma points c-trib

Nov 02, 2021 @ 21:56

Okay! after hours. I found this. It seems like the datepicker validation dosen't like it when it's grouped with other properties. Eg

$scope.properties = [
   {  view: "textbox", },
    { view: "datepicker" }
];

So I tried moving the datepicker to it's own <umb-property-editor>. But that still diden't work. I also had a $q.all(promises).then(function () {});wrapped around the declaration of datepicker & textbox. So I tried moving the datepicker declaration outside the $q.all() And then the validation seems to work fine!

So now it looks like this:

    <umb-property property="property" ng-repeat="property in properties">
        <umb-property-editor model="property"></umb-property-editor>
   </umb-property>

   <umb-property property="showUntil">
       <umb-property-editor model="showUntil"></umb-property-editor>
  </umb-property>

Controller:

$scope.showUntil = {
    editor: "Umbraco.DateTime",
    alias: "showUntil",
    label: "Show until",
    hideLabel: false,
    view: "datepicker",
    config: {
        pickTime: false,
        format: "YYYY-MM-DD",
    },
    validation: {
        mandatory: true,
        //pattern: ""
    }    
   };

        $q.all(promises).then(function () {
            $scope.properties = [
                {
                    alias: "message",
                    label: "Message",
                    view: "textbox",
                    value: "",
                    validation: {
                        mandatory: true,
                        //pattern: ""
                    }
                },

            ];
});

¯\_(ツ)_/¯

I have no idea why this works. But right now I am just happy it does!

Thanks for your help Bjarne!

//Johannes

Copy Link

Bjarne Fyrstenborg 1285 posts 4039 karma points MVP 8x c-trib

Nov 03, 2021 @ 08:31

Hi Johannes

Great you found a solution, but it guess it should work as well looping the properties as it is used in core.

Did you try specifying editor as well?

$scope.properties = [
    {
        editor: "Umbraco.TextBox",
        alias: "message",
        label: "Message",
        view: "textbox",
        validation: {
            mandatory: true,
            //pattern: ""
        }
    },
    {
        editor: "Umbraco.DateTime",
        alias: "showUntil",
        label: "Show until",
        hideLabel: false,
        view: "datepicker",
        value: null,
        config: {
            pickTime: false,
            format: "YYYY-MM-DD",
        },
        validation: {
            mandatory: true,
            //pattern: ""
        }
    }
];

Copy Link

is working on a reply...

Flag this post as spam?

Mandatory umb-property-editor