Status

Produktionsklar

Det specialiserade inmatningsfältet används när användaren själv ska skriva in information som kontonummer, personnummer eller telefonnummer. Det specialiserade inmatningsfältet ärver egenskaper från vanliga inmatningsfältet och lägger till text för etikett, validerar inmatat värde och formaterar värde vid behov.

Läs mer om formatering och parsning

Läs mer om validering

Exempel för de specialiserade inmatningsfälten finner du på inmatningsfält

Bankgiro

FBankgiroTextField

Etikett

Format

Validering

maxLength.bankgiro="{ maxLength: { length: 9 }"

Validatorer

Maxlängd och format för bankgiro.

Attribut för maxlängd

maxlength=40 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Clearingnummer

FClearingnumberTextField

Etikett

Format

För clearingnummer kan värdet behöva omvandlas ytterligare innan det skickas till backend. Importera formatClearingNumberForBackend-metod från logik-paketet för att ta bort eventuell femte siffra.

Validering

clearingNumber

Validatorer

Format för clearingnummer

Attribut för maxlängd

maxlength=16 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Kontonummer

FBankAccountNumberTextField

Etikett

Format

Validering

bankAccountNumber

Validatorer

Format för kontonummer.

Attribut för maxlängd

maxlength=40 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Mejladress

FEmailTextField

Inmatningsfält för mejladress finns med enkel validering som beskrivs nedan och med utökad validering. Vid utökad validering ska användaren bekräfta mejladressen genom att skriva in den en gång till.

Etikett

Validering

email

Validatorer

Format för mejladress.

Attribut för maxlängd

maxlength=80 Läs mer om längdvalidering

<script lang="ts">
import { defineComponent } from "vue";
import { FEmailTextField } from "@fkui/vue";

export default defineComponent({
    name: "FEmailTextFieldSimple",
    components: { FEmailTextField },
    data() {
        return { email: "" };
    },
});
</script>

<template>
    <f-email-text-field
        id="email"
        v-model="email"
        v-validation.required
        :max-length="80"
    ></f-email-text-field>
</template>

Mejladress - utökad

FEmailTextField

Inmatningsfält för mejladress finns med enkel validering och med utökad validering som beskrivs nedan. Vid utökad validering ska användaren bekräfta mejladressen genom att skriva in det en gång till.

Etikett

Validering

email.matches

Validatorer

Format för mejladress och identisk.

Attribut för maxlängd

maxlength=80 Läs mer om längdvalidering

<script lang="ts">
import { defineComponent } from "vue";
import { FEmailTextField } from "@fkui/vue";

export default defineComponent({
    name: "FEmailTextFieldExtended",
    components: { FEmailTextField },
    data() {
        return { extendedEmail: "" };
    },
});
</script>

<template>
    <f-email-text-field
        v-model="extendedEmail"
        v-validation.required
        inputmode="email"
        :max-length="80"
        extended-validation
    >
    </f-email-text-field>
</template>

API

Models

v-model: string|null Optional

The value for the input. If the prop is not set undefined will be used.

Default: undefined

Props

id: string Optional

The id for the input id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

maxLength: number Optional

‐

Default: 80

extendedValidation: boolean Optional

‐

pasteErrorText: string Optional

The error message to be displayed on paste If the prop is not set the default text "Du kan inte kopiera mejladressen. Du måste skriva in den igen." will be set

Default: TranslationService.provider.translate( "fkui.email-text-field.error.pasting", "Du kan inte kopiera mejladressen. Du måste skriva in den igen.", )

Events

blur

‐

Arguments:

• <anonymous>: string | number

change

‐

Arguments:

• <anonymous>: string | number

Slots

default

Optional slot for label content.

extended-label

Optional slot for label content of extended field.

Numeriskt

FNumericTextField

Inmatningsfält används när användaren ska fylla i ett tal. Värdet i fältet kommer automatiskt formateras som ett nummer med tusenavskiljare och kommatecken som decimalpunkt. Utvecklaren behöver själv lägga till lämpliga numeriska validatorer som till exempel _v-validation.required.decimal.maxValue.minValue=" ... ".

Format

Validering

decimals

Validatorer

Decimaltal (om propertyn är angiven).

Attribut för maxlängd

maxlength=20 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Organisationsnummer

FOrganisationsnummerTextField

Etikett

Format

Validering

maxLength.organisationsnummer="{ maxLength:{ length: 11 }}"

Validatorer

Maxlängd och format för organisationsnummer.

Attribut för maxlängd

maxlength=20 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Personnummer

FPersonnummerTextField

Inmatningsfältet för personnummer har förlåtande inmatning, så att användaren kan skriva in personnummer med både 10 eller 12 siffror. Det inmatade värdet kommer efter godkänd validering att formateras enligt Skatteverkets regler för personnummer. Från och med det år personen fyller 100 år ska personnumret skrivas med plustecken istället för bindestreck. Inskick till backend innehåller 12 siffror, ååååmmdd-nnnn.

Etikett

Format

Validering

maxLength.personnummerFormat.personnummerLuhn= "{ maxLength:{ length: 20 }}"

Validatorer

Maxlängd, format för personnummer och kontrollsiffra för personnummer.

Attribut för maxlängd

maxlength=23 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Plusgiro

FPlusgiroTextField

Etikett

Format

Validering

maxLength.plusgiro= "{ maxLength:{ length: 9 }}"

Validatorer

Maxlängd och format för plusgiro.

Attribut för maxlängd

maxlength=15 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Postnummer

FPostalCodeTextField

Etikett

Format

Validering

maxLength.postalCode="{ maxLength:´{ length: 13 }}"

Validatorer

Maxlängd och format för postnummer.

Attribut för maxlängd

maxlength=15 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Procent

FPercentTextField

Format

Validering

percent.minValue.maxValue= "{ minValue: { minValue: 0 }, maxValue: { maxValue: 999 } }"

Validatorer

Format för procent, minvärde och maxvärde.

Attribut för maxlängd

maxlength=10 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Sökfält

FSearchTextField

Används för sökningar där användaren skriver in sin söktext i ett inmatningsfält.

Etikett

Format

Valiering

Attribut för maxlängd

maxlength=80 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Telefonnummer

FPhoneTextField

Inmatningsfält för telefonnummer finns med enkel validering som beskrivs nedan och med utökad validering. Vid utökad validering ska användaren bekräfta telefonnummer genom att skriva in det en gång till.

Etikett

Format

Validering

phoneNumber

Validatorer

Format för telefonnummer.

Attribut för maxlängd

maxlength=80 Läs mer om längdvalidering

<script lang="ts">
import { defineComponent } from "vue";
import { FPhoneTextField } from "@fkui/vue";

export default defineComponent({
    name: "FPhoneTextFieldSimple",
    components: { FPhoneTextField },
    data() {
        return { phone: "" };
    },
});
</script>

<template>
    <f-phone-text-field v-model="phone" v-validation.required></f-phone-text-field>
</template>

Telefonnummer - utökad

FPhoneTextField

Inmatningsfält för telefonnummer finns med enkel validering och med utökad validering som beskrivs nedan. Vid utökad validering ska användaren bekräfta telefonnummer genom att skriva in det en gång till.

Etikett

Format

Validering

phoneNumber.matches

Validatorer

Format för telefonnummer och identisk.

Attribut för maxlängd

maxlength=80 Läs mer om längdvalidering

<script lang="ts">
import { defineComponent } from "vue";
import { FPhoneTextField } from "@fkui/vue";

export default defineComponent({
    name: "FPhoneTextFieldExtended",
    components: { FPhoneTextField },
    data() {
        return { extendedphone: "" };
    },
});
</script>

<template>
    <f-phone-text-field v-model="extendedphone" v-validation.required extended-validation>
        <template #extendedLabel> Skriv in ditt telefonnummer igen </template>
    </f-phone-text-field>
</template>

API

Models

v-model: string|null Optional

The value for the input. If the prop is not used or set to undefined or null then the default value will be used.

Default: undefined

Props

id: string Optional

The id for the input id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

maxLength: number Optional

‐

Default: 80

extendedValidation: boolean Optional

‐

Events

blur

‐

Arguments:

• <anonymous>: string | number

change

‐

Arguments:

• <anonymous>: string | number

Slots

default

‐

extendedLabel

‐

Valuta

FCurrencyTextField

Inmatningsfält för valuta används när modellen (v-model) är av typen number. Värdet i fältet kommer automatiskt formateras som ett nummer med tusenavskiljare och kommatecken som decimalpunkt. Utvecklaren behöver själv lägga till ytterligare lämpliga numeriska validatorer som till exempel _v-validation.required.maxValue=" ... ".

Format

Validering

currency.integer

Validatorer

Valutabelopp och heltal.

Attribut för maxlängd

maxlength=20 Läs mer om längdvalidering

API

Se Inmatningsfält för API.

Relaterat

Inmatningsfält

Formatering och parsning

Validering