Lines Matching full:form

4 [bootstrap-vue form component](https://bootstrap-vue.org/docs/components/form)
8 ## Form component
10 When creating a new form, use the `<b-form>`
11 [form component](https://bootstrap-vue.org/docs/components/form). Use the
15 ## Form group component
17 The `<b-form-group>`
18 [form group component](https://bootstrap-vue.org/docs/components/form-group)
19 pairs form controls with a legend or label, helper text, invalid/valid feedback
20 text, and visual validation state feedback. Learn more about commonly used form
23 - [Form checkbox](https://bootstrap-vue.org/docs/components/form-checkbox)
24 - [Form input](https://bootstrap-vue.org/docs/components/form-input)
25 - [Form radio](https://bootstrap-vue.org/docs/components/form-radio)
26 - [Form select](https://bootstrap-vue.org/docs/components/form-select)
27 - [Form file custom component](/guide/components/file-upload)
29 When helper text is provided, use the `<b-form-text>` component and
30 `aria-describedby` on the form group component the helper text describes.
34 For custom form validation messages, disable browser native HTML5 validation by
35 setting the `novalidate` prop on `<b-form>`. Use Vuelidate to check the form
37 `<b-form-invalid-feedback>` component.
39 When creating a new form add the `VuelidateMixin` to the `scripts` block and
43 ## Complete form
45 A complete form will look like this.
49   <b-form novalidate @submit.prevent="handleSubmit">
50     <b-form-group
51       :label="$t('pageName.form.inputLabel')"
52       label-for="form-input-id"
54       <b-form-text id="form-input-helper-text">
55         {{ $t("pageName.form.helperText") }}
56       </b-form-text>
57       <b-form-input
58         id="form-input-id"
59         v-model="form.input"
61         aria-describedby="form-input-helper-text"
62         :state="getValidationState($v.form.input)"
63         @change="$v.form.input.$touch()"
65       <b-form-invalid-feedback role="alert">
66         <div v-if="!$v.form.input.required">
67           {{ $t("global.form.fieldRequired") }}
69       </b-form-invalid-feedback>
70     </b-form-group>
74   </b-form>
88     form: {
94       form: {
119           this.$v.form.$reset();