Vugu Forms

Note

Forms are a work-in-progress as of Q2 2020. The package vgform has initial work to handle binding data to form controls, but please beware this code is still quite volatile and likely to change signicantly (more so than the rest of the Vugu code base).

Form controls provided by Vugu are intended to provide useful binding of Go data to form controls. Other than that, the idea is that they stay out of your way and act as much like the underlying HTML element they wrap as possible.

Input Controls

vgform:Input can be used to output an <input> tag and bind data to its value. Example:

<!-- root.vugu-->

<form>

    <vgform:Input type="email" class="some-class-here"
        :Value='vgform.StringPtr{&c.TextValue}'
        ></vgform:Input>

    <div>You entered: <span vg-html="c.TextValue"></span></div>

</form>

<script type="application/x-go">
import "github.com/vugu/vugu/vgform"
type Root struct {
    TextValue string
}
</script>

The vgform.StringPtr type adapts a *string so it can be used to get and set form values with vgform:Input. Note that the class attribute here (and any others that you provide) are passed through to the underlying HTML element and the normal attribute value rules apply.

Select Control

vgform:Select can be used to wrap a <select> element and its options with useful binding. Example:

<!-- root.vugu-->

<form>

    <vgform:Select id="food_group" class="form-control" 
        :Value='vgform.StringPtrDefault(&c.TextValue, "jungle_group")'
        :Options='vgform.SliceOptions{"sandwich_group","cow_group","jungle_group","butterfinger_group"}.Title()'
        ></vgform:Select>

    <div>You selected: <span vg-html="c.TextValue"></span></div>

</form>

<script type="application/x-go">
import "github.com/vugu/vugu/vgform"
type Root struct {
    TextValue string
}
</script>

NOTE: The select control will be updated to allow custom slot content so things like option groups can be used by providing a slot which gives the contents of the <select>.

Textarea Control

vgform:Textarea can be used to wrap a <textarea> element with binding. Example:

<!-- root.vugu-->

<form>

    <vgform:Textarea id="textarea1" class="form-control" rows="10"
                :Value='vgform.StringPtrDefault(&c.TextValue, "testing")'
                ></vgform:Textarea>

    <div>You entered: <span vg-html="c.TextValue"></span></div>

</form>

<script type="application/x-go">
import "github.com/vugu/vugu/vgform"
type Root struct {
    TextValue string
}
</script>