Fritekstfelt Fritekstfelt-input.

Struktur

<lk-textarea-block>
  <label>
    (lk-help-text)
      (slot name="help-text"/)
    (/lk-help-text)
  </label>
  <slot/>
  <textarea/>
  (p/)
</lk-textarea-block>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
guid string "" <textarea> sin id= og <label> sin for=
input-name string "" <textarea> sin name=
label string "" <label> sin tekst
placeholder string "" <textarea> sin placeholder=
error-message string ""
required boolean false <textarea> sin required=
disabled boolean false <textarea> sin disabled=
min-length number "" <textarea> sin min-length=
max-length number "" <textarea> sin max-length=
rows number "" <textarea> sin rows=
value string ""
reset boolean false Brukes internt av komponenten
initial-valid boolean true Brukes internt av komponenten

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert mellom <label> og <textarea>
help-text Plassrres inni <label>

Metoder

Merk at alle metoder er asynkrone. Ref. Stenciljs.com

Metode Parameter Retur Beskrivelse
validate
checkValidity
() valid:boolean
getValue () value:string <textarea> sin .value
setValue (newValue:string) newValue:string Setter <textarea> sin .value
setFocus () null Kaller .focus()<textarea>

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.







Kort beskrivelse av skoleveien eller omstendighetene som kan gi rett til skoleskyss. Dersom barnet har delt bosted og beskrivelsen kun gjelder fra en av adressene må dette beskrives.

<div>
<lk-textarea-block
    max-length="15000"
    guid="free"
    input-name="free"
    label="Her kan du skrive så mye du vil"
    placeholder="Lorem ipsum dolor sit amet"
></lk-textarea-block>

<br>
<br>
<br>

<lk-textarea-block guid='reason'
    class="span-half-fill-rest"
    input-name='reason'
    placeholder='Begrunnelse for søknad'
    max-length='4000'
    error-message='Du må oppgi en gyldig begrunnelse.'
    required>
    <div class='paragraph link-out' slot="label">
        Det må foreligge særlige grunner til å utsette oppmålingsforretningen jf. 
        <a href='https://lovdata.no/lov/2005-06-17-101/§6' title='Lov om eigedomsregistrering (matrikkellova)' target='_blank' class='link-out'>
            matrikkellova § 6
        </a>Hvorfor skal du utsette oppmålingen?
    </div>
</lk-textarea-block>

<br>
<br>
<br>

<lk-textarea-block guid='descriptionOfNeeds'
    input-name='descriptionOfNeeds'
    placeholder='F.eks. Skoleveien krysser en motorvei...'
    label='Utdyp hvorfor barnet trenger skoleskyss'
    class='add-required'
    error-message='Du må oppgi hvorfor barnet trenger skoleskyss.'
    required>
    <div slot='help-text'>
        <p>Kort beskrivelse av skoleveien eller omstendighetene som kan gi rett til skoleskyss. Dersom barnet har delt bosted og beskrivelsen kun gjelder fra en av adressene må dette beskrives.</p> 
    </div>
</lk-textarea-block>
</div>

Hvor finner jeg denne koden?