$mol_string: show errors

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

string/string.view.tree

@@ -8,6 +8,7 @@ $mol_string $mol_view
 		0
 	auto /
 		<= selection_watcher null
+		<= error_report null
 	field *
 		^
 		disabled <= disabled false

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() : '' ) || ' '