I have created a custom FieldType and added properties with the [Setting] attribute added, such that the properties end up as Settings for which you can provide a value when you are adding the Field to a form.
However, I can't see an obvious way to validate the properties themselves, I've tried adding ValidationAttributes to the properties but this doesn't work.
I feel like I must be missing something obvious, as it seems odd that the settings for a given Field are not subject to any kind of validation.
That is, I am referring to when you are actually designing the form and are assigning specific settings for the fieldtype. In my case I have added Min and Max settings for my custom FieldType, and obviously Min shouldn't be able to be greater than Max, I was hoping I could get unobtrusive validation wired up for when trying to add the FieldType to form.
It's not hooking into the proper validation but you could get something working with a custom view to edit the setting.
The [Setting] attribute has a view property:
[Setting("My setting", view ="my-view")]
The view is an HTML file in /App_Plugins/UmbracoForms/Backoffice/Common/SettingTypes, so you copy one as my-view.html and add some custom JavaScript that fits your needs.
In the Angular controller of your custom field type you can hook into the validation of the settings form and add some custom logic. You can then show validation errors and block submission until all errors have been cleared. Something like:
// retrieve the Angular scope of the main settings overlay
var settingsScope = angular.element('[name="overlayForm"]').scope();
// add custom validation callback function to formSubmitting
settingsScope.$$listeners.formSubmitting.push(function (event, args) {
var isInvalid = false;
var errorMessages = [];
if (!$scope.model.setting1) {
isInvalid = true;
errorMessages.push('Setting1 must be set.');
}
if (!$scope.model.setting2) {
isInvalid = true;
errorMessages.push('Setting2 must be set.');
}
event.currentScope.overlayForm.$invalid = isInvalid;
if (isInvalid) {
for (var errorMessage of errorMessages) {
notificationsService.error(errorMessage);
}
});
Please note that if you are going to use the notificationsService to show the error messages, you will also need to make sure this is injected into the controller.
Validation on Settings for a custom FieldType
I have created a custom FieldType and added properties with the [Setting] attribute added, such that the properties end up as Settings for which you can provide a value when you are adding the Field to a form.
However, I can't see an obvious way to validate the properties themselves, I've tried adding ValidationAttributes to the properties but this doesn't work.
I feel like I must be missing something obvious, as it seems odd that the settings for a given Field are not subject to any kind of validation.
That is, I am referring to when you are actually designing the form and are assigning specific settings for the fieldtype. In my case I have added Min and Max settings for my custom FieldType, and obviously Min shouldn't be able to be greater than Max, I was hoping I could get unobtrusive validation wired up for when trying to add the FieldType to form.
It's not hooking into the proper validation but you could get something working with a custom view to edit the setting.
The [Setting] attribute has a view property:
The view is an HTML file in
/App_Plugins/UmbracoForms/Backoffice/Common/SettingTypes, so you copy one asmy-view.htmland add some custom JavaScript that fits your needs.If you're just looking for a number you could use an HTML5 input type. Your view would be:
In the Angular controller of your custom field type you can hook into the validation of the settings form and add some custom logic. You can then show validation errors and block submission until all errors have been cleared. Something like:
Please note that if you are going to use the notificationsService to show the error messages, you will also need to make sure this is injected into the controller.
is working on a reply...