Komponent

FValidationGroup

Status

Produktionsklar

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.

<script lang="ts">
import { defineComponent } from "vue";
import { type GroupValidityEvent, FTextField, FValidationGroup } from "@fkui/vue";

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

<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>

API

Models

v-model: GroupValidityEvent Optional

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

Default: (): GroupValidityEvent => { return { isValid: false, componentsWithError: [], componentCount: 0 }; }

Props

stopPropagation: boolean Optional

Controls whether component-validity event should be propagated or not from underlying components.

Events

group-validity

Emitted when validation group has been updated.

Arguments:

• <anonymous>: GroupValidityEvent

Slots

default

‐