#fields
h3.is-size-3 Formidable Fields Home
p Formidable Fields are designed with generics in mind for easily resuable and expectant implementation and typing.
h4.is-size-4 FieldType Enum
p The available Formidable Field types are limited, consistent and flexible using the
code FieldType
| Enum.
h4.is-size-4 Formidable Field Props
p All Formidable Fields utilize the following props as defined in the
code FormidableField
| generic abstract. The specific implementation of the Formidable Field is acieved by using a common discriminator property, in this case
code fieldType.
table.table.is-striped.is-bordered.is-fullwidth
thead
tr
th.is-size-5.has-text-centered
code field
th.is-size-5.has-text-centered
code required
th.is-size-5.has-text-centered
code type
tbody
tr
td
code fieldType
td yes
td
code FieldType
tr
td
code name
td no
td
code string
tr
td
code label
td no
td
code string
tr
td
code id
td no
td
code string
tr
td
code required
td no
td
code string
tr
td
code disabled
td no
td
code string
tr
td
code value
td yes
td
code T
h5.is-size-5 Field Type(Required)
p The shared discriminator property inherited by all Formidable Field implementations is controlled with an Enum.
ul
li(v-for="field in fieldTypes" :key="field.key")
code FieldType.{{field.key}}
| =
code "{{field.resolvedValue}}"
.box
h5.is-size-5 Note
p For ease of documentation many object-style code samples are not 100% accurate to the real code sample as to simplify documentation they are legitimate 100% JSON.stringified objects (therefore losing the Enumerated references of values).
p This means that although you see an object defined like this:
.columns.is-mobile
.column
pre(
v-highlightjs="JSON.stringify(basicForm, null, 1)"
)
code(class="javascript")
.column
FormidableForm(:form="basicForm")
p The objects definition is actually:
pre(
v-highlightjs="basicFormForRealz"
)
code(class="javascript")
h5.is-size-5 Field Name
code string
| -
code name
p The name field is usually optional.
h5.is-size-5 Field Label
code string
| -
code label
p The label field is uaully optional but recommended.
h5.is-size-5 Field ID
code string
| -
code id
p The ID field is optional, but recommended.
h5.is-size-5 Field Required
code boolean
| -
code required
p The required field by default is
code false
| and is therefore optional. Making a field required will mean that
code null
| is an unacceptable value unless specified otherwise.
.columns.is-mobile
.column
FormidableForm(:form="basicRequiredForm")
.column
FormidableForm(:form="basicForm")
h5.is-size-5 Field Disabled
code boolean
| -
code disabled
.columns.is-mobile
.column
FormidableForm(:form="basicDisabledForm")
.column
FormidableForm(:form="basicForm")
p The disabled field by default is
code false
| and is therefore optional. Making a field disabled will prevent any user input/interaction.
h5.is-size-5 Field Value
code T
| -
code value
p
code value
| is a required property as it is what will be used to enable `v-model` binding.