Använd ett multitextfält när användaren ska kunna ange flera fritextalternativ i samma fält.
Du kan använda ett multitextfält när du vill att användaren ska kunna ange flera fritextalternativ och där det inte finns några förutbestämda alternativ att välja mellan.
I första hand ska du använda en så pass tydlig etikett så att en hjälptext inte behövs. Behöver du använda en hjälptext kan du välja mellan två varianter, statisk och dynamisk. Använd den statiska i första hand. Du ska använda samma variant i hela systemet och alltså inte blanda dem. Varianterna är:
Den här komponenten kan behöva en formathjälp för att användaren ska förstå hur den ska kunna fylla i mer än ett värde. Eftersom komponenten ska fungera både på dator och mobil så ska hjälptexten fungera oberoende av enhet. Försök att vara så specifik som möjligt i hjälptexten.
Skriv: Använd kommatecken för att lägga till flera xxx.
Skriv inte: Använd kommatecken för att separera värden.
Komponenten driftsattes första gången i version 7.0.0. Komponenten kräver Javascript för att fungera.
Komponenten multitextfält finns i storlekarna medium och small. Storleken small kan du använda om utrymmet på skärmen är begränsad.
Egenskap | Attribut | Beskrivning | Typ | Förvalt värde |
---|---|---|---|---|
disabled | disabled | Är multitext disabled? | boolean | false |
errorText | error-text | Feltext i multitext. | string | - |
errorTextRef | error-text-ref | Referens till en feltext som visas ifall "valid" är satt till "false". | string | - |
helpTextRef | help-text-ref | Reference till hjälptext i multitext. | string | - |
extraClass | extra-class | Lägg till extra klasser i parent elementet string t.ex. extra-class="classnamn1 classnamn2" | string | - |
label | label | label text. | string | - |
required | required | Är multitext required? | boolean | false |
size | size | Storlek på komponenten, möjliga storlekar small och medium. | string | 'medium' |
valid | valid | Är multitext valid? | boolean | true |
value | value | lista med alla värden. Obs. måste föjla json format. | string | string[] | - |
För att få multitext att fungera med Angular FormControl och ngModel behöver du lägga in attributet ngDefaultControl som berättar för Angular att multitext kan ses som en vanligt <input> element och kan då användas med ngModel och formControlName. Obs! Glöm inte att importera FormsModule eller ReactiveFormsModule när du använder ngModel resp. Formcontrol i din Angular modul.
<jv-multitext ngDefaultControl formControlName="<Your fromcontrolname>"
[value]="<Your formcontrol model>" label="<Your label>">
</jv-multitext>
<jv-multitext label="Smeknamn"></jv-multitext>
<jv-multitext label="Smeknamn" size="small"></jv-multitext>
<jv-multitext label="Smeknamn" required="true"></jv-multitext>
<jv-multitext label="Smeknamn" required="true" valid="false" error-text="Fyll i minst ett smeknamn">
</jv-multitext>
<jv-multitext label="Smeknamn" required="true" valid="false" error-text="Fyll i minst ett smeknamn">
</jv-multitext>
<jv-multitext label="Smeknamn" help-text-ref="helptext">
<span slot="helptext" class="label__description">Använd kommatecken för att lägga till flera
smeknamn.</span>
</jv-multitext>
<jv-multitext label="Smeknamn" help-text-ref="helptext">
<jv-help-text slot="helptext"><span>Använd kommatecken för att lägga till flera smeknamn.</span>
</jv-help-text>
</jv-multitext>
<jv-multitext label="Smeknamn" disabled="true"></jv-multitext>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input1"
disabled="false" required="false" extra-class=""
value='Norge'>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="small"
error-text=""
error-text-ref="errortext"
valid="true" help-text-ref="helptext" inputid="input2"
disabled="false" required="false" extra-class=""
value='Norge'>
<span slot="errortext"></span>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text=""
error-text-ref="errortext"
valid="true" help-text-ref="helptext" inputid="input3"
disabled="false" required="true" extra-class=""
value='Norge'>
<span slot="errortext">Välj en bilaga</span>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input4"
disabled="false" required="false" extra-class=""
value='Norge'>
<span class="label__description" slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.</span>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text=""
error-text-ref=""
valid="true" help-text-ref="helptext" inputid="input5"
disabled="false" required="false" extra-class=""
value='Norge'>
<jv-help-text slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.</jv-help-text>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text="Fyll i minst ett smeknamn"
error-text-ref=""
valid="false" help-text-ref="helptext" inputid="input6"
disabled="false" required="false" extra-class=""
value='Norge'>
<jv-help-text slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.</jv-help-text>
</jv-multitext-v1>
<jv-multitext-v1 label="Smeknamn" size="medium"
error-text=""
error-text-ref="errortext"
valid="false" help-text-ref="helptext" inputid="input8"
disabled="true" required="true" extra-class=""
value='Norge'>
<jv-help-text slot="helptext">Lite text med beskrivning för hur du ska besvara denna fråga och för att testa hur en lång beskrivning
ser ut tillsammans med ett felmeddelande ifall man fyllt i fel eller inte alls.</jv-help-text>
<span slot="errortext">Fyll i minst ett smeknamn</span>
</jv-multitext-v1>