I have previously added validation icon/message support to UI.Next.Formlets (there is a pull request pending). Now I want to add a per Input submitter to delay validation until the user has finished typing. I thus need to pull out the existing Input from the formlet, and add a Submitter trigger to the OnChange event of the input. Importing WebSharper.UI.Next.Client does unfortunately not help, the On-methods of Elt objects are still "server-side". Here is the actual implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let ValidateOnChange (flX : Formlet<'T>)  =
	let flx = flX.Data()
    let sb = Submitter.Create flx.View (Failure [])
    let tf (_ : Dom.Element) (_ : Dom.Event) = sb.Trigger ()
    let ls =
        match flx.Layout with 
        | [l] -> 
            match l.Shape with
            | Item x ->
               match x with
               | :? Elt as x -> 
                   [{l with Shape = Item (x.OnChhange tf)}]
               | _ -> [l]
            | _ -> [l] 
        | l -> l
    Formlet (fun () ->
       {
           View = sb.View
           Layout = ls
       }
    )

P.S. I really like the Formlets because they are so simple, compact and convenient for quick and dirty work. The UI.Next.Forms are very nice too, but much more verbose. D.S.

Thanks, that explains it. I was a bit puzzled by the need for a quotation. I need to add a handler to an existing Doc.Input , but 'm having trouble accessing/finding the client side methods. Here is an actual snippet of my (client-side) code

1
2
3

match x with
| :? Elt as e -> e.OnChange (fun _ _ -> ())
| _ -> x

But this does not type check due to the missing quotations.

On* methods have an overload for the client and server side respectively. There is one which takes a quotation which is for the server to use and IIRC it may only contain a top level function in a JavaScript annotated module (so a client side module). There is another one which, in your case, would have the following type: OnChange : (Dom.Element -> Dom.Event -> unit) -> Elt. You can also use the on.* family of attributes when creating an element: spanAttr [on.click (fun el ev -> ())] [text "some span"], which work the same way as the e.On* methods.