From 6f8022698d3111c5a2b7eaaeef6a090a8c84827d Mon Sep 17 00:00:00 2001
From: jin <jin@hyoo.ru>
Date: Sat, 4 Nov 2023 19:12:04 +0300
Subject: [PATCH] $mol_string: show errors

---
 string/demo/demo.view.tree |  3 +++
 string/string.view.tree    |  1 +
 string/string.view.ts      | 25 ++++++++++++++++++++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/string/demo/demo.view.tree b/string/demo/demo.view.tree
index cde88f6d85f..982c36dbc82 100644
--- a/string/demo/demo.view.tree
+++ b/string/demo/demo.view.tree
@@ -6,6 +6,9 @@ $mol_string_demo $mol_example_small
 		<= Hint $mol_string
 			hint \Batman
 			value? <=> name? \
+		<= Broken $mol_string
+			hint \Broken
+			value? <=> broken? \
 		<= Filled $mol_string
 			value? <=> name2? \Jocker
 		<= Disabled $mol_string
diff --git a/string/string.view.tree b/string/string.view.tree
index 03c6defd653..a7755734327 100644
--- a/string/string.view.tree
+++ b/string/string.view.tree
@@ -8,6 +8,7 @@ $mol_string $mol_view
 		0
 	auto /
 		<= selection_watcher null
+		<= error_report null
 	field *
 		^
 		disabled <= disabled false
diff --git a/string/string.view.ts b/string/string.view.ts
index 44962ee4004..6461424aa02 100644
--- a/string/string.view.ts
+++ b/string/string.view.ts
@@ -5,17 +5,40 @@ namespace $.$$ {
 	 */
 	export class $mol_string extends $.$mol_string {
 		
+		@ $mol_action
 		event_change( next? : Event ) {
 			if( !next ) return
 			const el = next.target as HTMLInputElement
 			const from = el.selectionStart
 			const to = el.selectionEnd
-			el.value = this.value_changed( el.value )
+			try {
+				el.value = this.value_changed( el.value )
+			} catch( error ) {
+				const el = this.dom_node() as HTMLInputElement
+				if( error instanceof Error ) {
+					el.setCustomValidity( error.message )
+					el.reportValidity()
+				}
+				$mol_fail_hidden( error )
+			}
 			if( to === null ) return 
 			el.selectionEnd = to
 			el.selectionStart = from
 			this.selection_change( next )
 		}
+		
+		@ $mol_mem
+		error_report() {
+			try {
+				if( this.focused() ) this.value()
+			} catch( error ) {
+				const el = this.dom_node() as HTMLInputElement
+				if( error instanceof Error ) {
+					el.setCustomValidity( error.message )
+					el.reportValidity()
+				}
+			}
+		}
 
 		hint_visible() {
 			return ( this.enabled() ? this.hint() : '' ) || ' '