Validation in custom Property Editor
# help-with-umbraco
g
How do you validate a complex value in a custom property editor? This is my onFormSubmitting...
Copy code
$scope.$on('formSubmitting', (e, args) => {
    $scope.errors = [];
    $scope.modelIsValid = true;
    let errorsFound = false;

    if (!$scope.properties[0].mediaPicker.value || $scope.properties[0].mediaPicker.value.length <= 0) {
      $scope.errors.push('Desktop image must be selected');
      errorsFound = true;
    }

    $scope.model.value[0].desktopBreakpointImage = $scope.properties[0].mediaPicker.value;
    $scope.model.value[0].desktopImageAspectRatio = $scope.properties[0].aspectRatio.value;
    $scope.model.value[0].smallDesktopBreakpointImage = $scope.properties[1].mediaPicker.value;
    $scope.model.value[0].smallDesktopImageAspectRatio = $scope.properties[1].aspectRatio.value;
    $scope.model.value[0].tabletBreakpointImage = $scope.properties[2].mediaPicker.value;
    $scope.model.value[0].tabletImageAspectRatio = $scope.properties[2].aspectRatio.value;
    $scope.model.value[0].mobileBreakpointImage = $scope.properties[3].mediaPicker.value;
    $scope.model.value[0].mobileImageAspectRatio = $scope.properties[3].aspectRatio.value;

    if (errorsFound) {
      // prevent the publish here?
      $scope.modelIsValid = false;
    }
  });
I have 4 media pickers, and the first one is mandatory. I've tried setting my $scope.model.value to null, and while I do get a validation error from the data type saying "Value cannot be null", the page still saves and publishes with the null value 🤷 Ideally I want to show an alert with the contents of my $scope.errors property and prevent the publishing of the content.
o
I think you can just use a Notification Handler to do the server side validation https://docs.umbraco.com/umbraco-cms/reference/notifications
6 Views