Dear Umbraco community,
I am currently struggling to implement a custom property editor for the Umbraco backoffice with validation in Umbraco v13. To create the custom property editor in the first place, I followed the Umbraco documentation (
https://docs.umbraco.com/umbraco-cms/13.latest/tutorials/creating-a-property-editor?fallback=true). This works, but I also want to add validation to the custom property editor and prevent publishing if the fields are not valid.
For my use case, I am using two date fields (one for the start date and one for the end date) and trying to validate these date fields using an Angular controller. In this controller, I check, for example, whether the dates are not in the past and whether the end date comes after the start date. If at least one validation rule is broken, publishing should be prevented.
Unfortunately, I haven't been able to figure out how to prevent publishing properly. The best approach I've come up with so far is using an empty, hidden, and required input field in the HTML and assigning a value to this input field if everything is valid.
<input type="hidden" name="isValid" ng-model="isValid" required />
$scope.setValidity = function (isValid) {
$scope.isValid = isValid ? "valid" : "";
};
This seems to work on some pages (publishing is prevented), but in other cases, publishing still goes through even if the data is invalid and the required input field is empty, which really confuses me.
So my question is: Is there a better way to prevent the publishing of invalid data in a custom property editor using an Angular controller? Or is there something wrong with how I manipulate the hidden input field?
I also tried listening to the "formSubmitting" event and calling preventDefault(), but without success:
$scope.$on("formSubmitting", function (event) {
event.preventDefault();
});
Thanks in advance!