mandatory umb property editor

Johannes Lantz 156 posts 840 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 1286 posts 4060 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 840 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 1286 posts 4060 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 840 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 1286 posts 4060 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...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Mandatory umb-property-editor