Legg til funksjon til skjemaer

Legg til funksjon til skjemaer

Attributter

Attributt Tillatte verdier / eksempler / kommentar
iterate-attributes Default: "id,guid,dependant-id,dependant-guid,input-name,group-name"
iterate-extra-attributes Can be used in addition to iterate-attributes
first-hidden Default: "false"
button-text Default: "Legg til"
secondary Secondary-styling for nested/inner cloners.

Default: "false"
background-color Default: "#e4e6ec" (tint-blue)

Secondary default: "white"
button-style-class Default: "button--primary"

Secondary default: "button--primary button--primary--dark"

Public async metoder

Metode Eksempler / kommentar
addClone() Legger til og returnerer en nybakt klone.

F.eks.:
let cloner = document.querySelector("lk-cloner");
let freshPromise = Promise.resolve(cloner.addClone());
let freshClone = freshPromise.then(result => freshClone = result);


Evt. i en async-setting:
let cloner = document.querySelector("lk-cloner");
let freshClone = await cloner.addClone();

Slots

Slot-name Eksempler / kommentar
Klone-innholdet
before Før klone-innholdet
after Etter klone-innholdet

Legg til funksjon til skjemaer

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


Alt som plasseres inni denne slot'en kommer før legg-til-gruppen

Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen

<lk-cloner button-text="Legg til person">

    <div slot="before" class="span-whole">
        <p>Alt som plasseres inni denne slot'en kommer før legg-til-gruppen</p>
    </div>

    <lk-input-block class="span-half"
    guid="person0.Navn"
    input-name="person[0].Navn"
    preset="fullname"
    required>
    </lk-input-block>

    <lk-input-block class="span-half"
    guid="person0.Pnr"
    input-name="person[0].Pnr"
    preset="personalid"
    required>
    </lk-input-block>

    <lk-radio-group class="span-whole"
    guid="person0.Bonanza"
    group-name="person[0].Bonanza"
    group-class=""
    group-label="Legg til klone-bonanza?"
    radio-labels='["Ja","Nei"]'
    values='["true","false"]'
    vertical-align="false"
    dependant-id="bonanza0"
    show-dependant-if-value="true"
    required
    error-message="Dette feltet er obligatorisk">
    </lk-radio-group>

    <lk-cloner id="bonanza0"
    class="span-whole no-display"
    secondary
    button-text="Legg til bedrift"
    iterate-extra-attributes="rename">

        <lk-input-block class="span-whole"
        guid="person0.Organisasjon0.Orgnr"
        input-name="person[0].Organisasjon[0].Orgnr"
        preset="organisationid"
        required 
        data-auto-required >
        </lk-input-block>

        <lk-file-upload guid="person0.Organisasjon0.Firmaattest"
        input-name="person[0].Organisasjon[0].Firmaattest"
        rename="person0_organisasjon0_firmaattest"
        class="span-whole"
        small
        preset-accept="documents,images"
        required
        data-auto-required>
        </lk-file-upload>
        
        <lk-checkbox guid="person0.Organisasjon0.EttersendeFirmaattest"
        input-name="person[0].Organisasjon[0].EttersendeFirmaattest"
        class="span-whole"
        label="Jeg ønsker å ettersende firmaattest"
        value="true"
        dependant-guid="person0.Organisasjon0.Firmaattest"
        hide-dependant-if-checked>
        </lk-checkbox>

        <lk-cloner id="bonanza0inception0"
        class="span-whole"
        first-hidden
        button-text="Legg til bransje">

            <lk-input-block class="span-whole"
            guid="person0.Organisasjon0.Bransjer0"
            input-name="person[0].Organisasjon[0].Bransjer[0].Bransje"
            label="Bransje"
            placeholder="Bransje"
            required>
            </lk-input-block>

        </lk-cloner>
    
    </lk-cloner>

    <div slot="after" class="span-whole">
        <p>Alt som plasseres inni denne slot'en kommer mellom legg-til-gruppen og legg-til-knappen</p>
    </div>

</lk-cloner>