Validering samlad

Komponent: FValidationGroup
Status: Produktionsklar

Innehåll

Samlad validering används för att få information om alla objekt i en grupp uppfyller valideringskriterier. Tillgång till gruppens valideringstatus nås enkelt via v-model. Standard är att valideringsevent från underliggande inmatningsfält skickas vidare uppåt om man inte sätter stopPropagation till false.

<template>
    <div>
        <f-validation-group key="favoritGrupp" v-model="favoritGrupp">
            <f-text-field id="frukt" v-validation.required maxlength="100">
                Favoritfrukt
            </f-text-field>
            <f-text-field id="godis" v-validation.required maxlength="100">
                Favoritgodis
            </f-text-field>
        </f-validation-group>

        <pre>v-model</pre>
        <pre>{{ favoritGrupp }}</pre>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { FValidationGroup, FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FValidationGroupExample",
    components: { FValidationGroup, FTextField },
    data() {
        return { favoritGrupp: {} };
    },
});
</script>

API

Props
Name	Description	Type	Required	Default
v-model	A `GroupValidityEvent` object containing: `isValid`: the aggregated validity of underlying components `componentsWithError`: a list of components with errors sorted in DOM order `componentCount`: number of registered components	GroupValidityEvent	false	(): GroupValidityEvent => { return { isValid: false, componentsWithError: [], componentCount: 0 }; }
stopPropagation	Controls whether component-validity event should be propagated or not from underlying components.	boolean	false	false

Events
Name	Description	Properties
group-validity	Vue2 v-model event.	<anonymous>: GroupValidityEvent
update:modelValue	‐	‐

Slots
Name	Description	Bindings
default	‐	‐

Kakor på webbplatsen

Validering samlad

API