[U15] Validating a required field in property editor conditionally to prevent save and publish

Questions
,
3

Hi @LuukPeters

Great question, I know we are used to things happening magically from Angular-JS but this is not the case any longer.

For the Validation of Property Editors we follow a very Native architecture, which might give you a better background for the way its working.

We validation the Property Editor UI Element. And for you to append Validation to it, it has to become a Form Control(The Native name for an Element that can represent a value in a form)

We provide a helper Mixin that you can use to make that happen. Its called UmbFormControlMixin.
Search for that in the codebase, and you will find various implementations.

It declares a value property, so use that for the value, as it will trigger a validation check.

And then it comes with a method to add inner Form Controls to the validation of your property editor. That is called: addFormControlElement. Use this to add the Form Controls that should be valid for the Property Editor to be valid.

Lit comes with this Life Cycle callback firstUpdated, which is triggered after first render, making you able to query select inner elements:

override firstUpdated() {
		this.addFormControlElement(this.shadowRoot!.querySelector('umb-input-number-range')!);
	}

— In this way you can have Form Controls that can be invalid without them affecting the Property Editor, and vice versa if they are connected they make your Property Editor invalid as well. It’s your choice if they are connected.

In your case, I would always connect the text-area and then toggle the required attribute on it. that turns on or off the validation-rule.

For general examples see these Property Editors:

src/Umbraco.Web.UI.Client/src/packages/core/components/input-toggle/input-toggle.element.ts

src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts

I hope that helps you move forward :small_airplane: