From f59574029bcb4d55c93c6b1a9de227e56462fb98 Mon Sep 17 00:00:00 2001
From: Andy Butland <abutland73@gmail.com>
Date: Wed, 15 Jan 2025 14:28:55 +0100
Subject: [PATCH] Validates and prevents save when providing a number outside
 of the configured range.

---
 .../property-editor-ui-number.element.ts      | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
index 5f48f61ba1e6..095f3fc9af2b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number/property-editor-ui-number.element.ts
@@ -5,6 +5,7 @@ import type {
 	UmbPropertyEditorConfigCollection,
 	UmbPropertyEditorUiElement,
 } from '@umbraco-cms/backoffice/property-editor';
+import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-property-editor-ui-number')
 export class UmbPropertyEditorUINumberElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@@ -52,16 +53,19 @@ export class UmbPropertyEditorUINumberElement extends UmbLitElement implements U
 
 	override render() {
 		return html`
-			<uui-input
-				type="number"
-				min=${ifDefined(this._min)}
-				max=${ifDefined(this._max)}
-				step=${ifDefined(this._step)}
-				placeholder=${ifDefined(this._placeholder)}
-				.value=${this.value ?? (this._placeholder ? undefined : 0)}
-				@input=${this.#onInput}
-				?readonly=${this.readonly}>
-			</uui-input>
+			<uui-form-validation-message>
+				<uui-input
+					type="number"
+					min=${ifDefined(this._min)}
+					max=${ifDefined(this._max)}
+					step=${ifDefined(this._step)}
+					placeholder=${ifDefined(this._placeholder)}
+					.value=${this.value ?? (this._placeholder ? undefined : 0)}
+					@input=${this.#onInput}
+					?readonly=${this.readonly}
+					${umbBindToValidation(this)}>
+				</uui-input>
+			</uui-form-validation-message>
 		`;
 	}