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

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

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

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

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

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

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

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

API

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

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

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

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

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

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

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

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

API

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