[Documentation Request] Custom Fields and Validators

[samo9789]

Hi,

We were able to use a custom field to have a Google Maps auto completed address field. This field should be mandatory...

Currently, we have

In the form declaration :

address: CustomField({
                        label: 'Adresse',
                        placeholder: '85 rue ...',
                        validations: [
                            Validator({
                                validator: required,
                                text: 'Le champ adresse est obligatoire',
                            }),
                        ],
                    }),

and in the template

<dynamic-form :form="form" @submitted="sendAddress">
            <template v-slot:address="{ control, onChange, onFocus, onBlur }">
                <GMapAutocomplete v-if="control"
                    :placeholder="control.placeholder"
                    @place_changed="setPlace"
                    @change="onChange"
                    @focus="onFocus"
                    @blur="onBlur"
                />
            </template>
        </dynamic-form>

Leaving the field empty does not raise an error while leaving this field empty does show the specified message

name: TextField({
                        label: 'Nom de votre adresse',
                        placeholder: 'Exemple: Maison Paris, Maison de la plage, ...',
                        validations: [
                            Validator({
                                validator: required,
                                text: 'Cette information est  obligatoire',
                            }),
                        ],
                    }),

Could you please add to the documentation how to make use of the validators for custom fields ?

Thank you very much

[alvarosabu]

Hey, thanks for the request, make totally sense I think is necessary.

[rferreira98]

@alvarosabu I'm having this issue. Custom field validation doesn't look very stable (I'm doing a checkbox custom field, code's below)

<div class="terms-conditions-field">
              <CheckboxComponent :id="control.name" :value="(control.value === 'on')" @change="onChange"
              @focus="onFocus" @blur="onBlur">
              <template #label>
                Accept
                <a href="#">Terms & Conditions</a>
              </template>
            </CheckboxComponent>
          </div>
          <div class="form-errors">
            <div class="form-error" v-for="err in control.errors">{{ err.text }}</div>
          </div>
  </div>
  

CheckboxComponent events are the input[type=checkbox] events emitted from inside the component.

CodeSandbox here: https://codesandbox.io/s/customfieldissue-vuedynamicforms-81f7ch