Object to components transformation inside form component

createFormElements.tsx

export default function createFormElements (nodes: Array<any> = []) {
  if (nodes.length < 1) return;

  /**
   * Transform a virtual node into a component
   * @param node The virtual node to transform
   */
  function createElement (node) {
    switch (node.type) {
      case 'text':
      case 'password':
      case 'email':
      case 'tel':
      case 'url':
      case 'number':
      case 'date':
        return (
          <div class="form-grid__row" style={{marginTop: '1rem'}}>
            <sk-text-input
                input-type={node.type}
                guid={node.id || null}
                input-name={node.name || null}
                label={node.label || null}
                placeholder={node.placeholder || null}
                error-message={node.errorMessage || null}
                help-text={node.helpText || null}
                required={node.required || null}
                pattern={node.pattern || null}
                min={node.min || null}
                max={node.max || null}
                step={node.step || null}
                min-length={node.minLength || null}
                max-length={node.maxLength || null}
                ref={node.ref || null}
                onChange={node.onChange || null}
              />
          </div>
        );

      case 'textarea':
        return (
          <div class="form-grid__row" style={{marginTop: '1rem'}}>
            <sk-textarea
                guid={node.id || null}
                input-name={node.name || null}
                label={node.label || null}
                placeholder={node.placeholder || null}
                error-message={node.errorMessage || null}
                help-text={node.helpText || null}
                required={node.required || null}
                min-length={node.minLength || null}
                max-length={node.maxLength || null}
                ref={node.ref || null}
                onChange={node.onChange || null}
              />
          </div>
        );

      case 'checkbox':
        return (
          <sk-checkbox-input
              guid={node.id || null}
              input-name={node.name || null}
              label={node.label || null}
              input-value={node.value || null}
              ref={node.ref || null}
              selectHandler={node.onChange || null}
            />
        );

      case 'radio':
        return (
          <sk-radio-input
              guid={node.id || null}
              input-name={node.name || null}
              label={node.label || null}
              input-value={node.value || null}
              ref={node.ref || null}
              selectHandler={node.onChange || null}
            />
        );

      case 'file':
        return (
          <div class="form-grid__row" style={{marginTop: '1rem'}}>
            <sk-file-input
                guid={node.id || null}
                input-name={node.name || null}
                label={node.label || null}
                accept={node.accept || null}
                required={node.required || false}
                error-message={node.errorMessage || null}
                ref={node.ref || null}
              />
          </div>
        );

      case 'select':
        return (
          <div class="form-grid__row" style={{marginTop: '1rem'}}>
            <sk-form-select
                guid={node.id || null}
                input-name={node.name || null}
                label={node.label || null}
                error-message={node.errorMessage || null}
                help-text={node.helpText || null}
                required={node.required || null}
                options={node.options || null}
                ref={node.ref || null}
              />
          </div>
        );

      case 'wrapperHalves':
        return (
          <div class="form-grid__row" id={node.id || null} ref={node.ref || null} style={node.hidden === true ? {display: 'none', marginTop: '0'} : {display: 'block', marginTop: '0'}}>
            {node.children.map(item => {
              return (
                <div class="form-grid__cell form-grid__cell--half">
                  {createElement(item)}
                </div>
              );
            })}
          </div>
        );

      case 'wrapperDiv':
        return (
          <div class={node.className || null} id={node.id || null} ref={node.ref || null} style={node.hidden === true ? {display: 'none', marginTop: '1rem'} : {display: 'block', marginTop: '1rem'}}>
            {node.children.map(item => {
              return (
                <div class="form-grid__cell">
                  {createElement(item)}
                </div>
              );
            })}
          </div>
        );

      case 'custom':
        return node.content;
        
      default:
        return null;
    }
  }

  let elements = [];

  for (let i = 0; i < nodes.length; i++) {
    let element = createElement(nodes[i]);
    elements.push(element);
  }

  return elements;
};

UiForm.tsx

import { Component, Prop, State } from "@stencil/core";
import HTTP from '../../../modules/HTTP.js';
import createFormElements from '../../../modules/createFormElements';

@Component({
  tag: 'ui-form'
})
export class Form {

  /** Props */
  @Prop() userName: string = null;
  @Prop() userPhone: string = null;
  @Prop() userEmail: string = null;

  @Prop() action: string = '/';
  @Prop() submitUrl: string = null;
  @Prop() formName: string = null;

  @Prop() alcoholTaxLow: number = 10;
  @Prop() alcoholTaxHigh: number = 20;

  /** HTTP handler */
  http: any = new HTTP();

  /** Refs to UI elements */
  form: any;
  submitError: any;
  submitButton: any;
  abortLink: any;

  operatorType1Checkbox: any;
  operatorType2Checkbox: any;
  operatorOrganizationBox: any;
  operatorNonOrganizationBox: any;
  orgSearch: any;
  orgSearchResult: any;
  orgSearchNoResults: any;

  operatorName: any;
  operatorAddress: any;
  operatorZipcode: any;
  operatorCity: any;
  operatorPhone: any;
  operatorEmail: any;
  operatorMunicipality: any;
  operatorBankAccount: any;

  actualSalesLastYearBox: any;
  expectedSalesBox: any;
  actualSalesBox: any;

  periodLastYearCheckbox: any;
  periodPartialYearCheckbox: any;
  partialYearBox: any;
  salesVolumeDateFrom: any;
  salesVolumeDateTo: any;

  @State() totalLowTaxAmount: number = 0;
  @State() totalHighTaxAmount: number = 0;

  @State() currentLowTaxAmount: number = 0;
  @State() currentHighTaxAmount: number = 0;

  endDateCurrentYear: any;

  /** Form spec */
  alcoholLicenseSalesSpec: Array<any> = [
    {
      type: 'custom',
      content: (
        <div class="form-section-header" style={{margin: '1rem 0'}}>
          <h2 class="form-section-header__name" style={{margin: '0'}}>Om bevillingen</h2>
        </div>
      )
    },
    {
      type: 'custom',
      content: (
        <h3 class="title title--level-4">Meldingen gjelder</h3>
      )
    },
    {
      type: 'radio',
      id: 'reporttype-1',
      name: 'ReportType',
      label: 'Ordinær omsetningsoppgave',
      value: '1',
      onChange: event => { this.handleContextChange(event); }
    },
    {
      type: 'radio',
      id: 'reporttype-2',
      name: 'ReportType',
      label: 'Sluttoppgave',
      value: '2',
      onChange: event => { this.handleContextChange(event); }
    },
    {
      type: 'custom',
      content: (
        <h3 class="title title--level-4" style={{marginTop: '1rem'}}>Omsetningsoppgave er...</h3>
      )
    },
    {
      type: 'radio',
      id: 'delivered-no',
      name: 'ReportDelivered',
      label: 'Ikke sendt inn i fjor',
      value: '1',
      onChange: () => {}
    },
    {
      type: 'radio',
      id: 'delivered-yes',
      name: 'ReportDelivered',
      label: 'Sendt inn i fjor',
      value: '2',
      onChange: () => {}
    },
    {
      type: 'custom',
      content: (
        <div class="form-section-header" style={{margin: '1rem 0'}}>
          <h2 class="form-section-header__name" style={{margin: '0'}}>Bevillingshaver</h2>
        </div>
      )
    },
    {
      type: 'radio',
      id: 'operator-1',
      name: 'LicenseOperatorType',
      label: 'Organisasjon registrert i Enhetsregisteret',
      value: '1',
      ref: el => this.operatorType1Checkbox = el,
      onChange: event => { this.handleOrganizationTypeChange(event); }
    },
    {
      type: 'radio',
      id: 'operator-2',
      name: 'LicenseOperatorType',
      label: 'Enkeltpersonforetak eller forening uten organisasjonsnummer',
      value: '2',
      ref: el => this.operatorType2Checkbox = el,
      onChange: event => { this.handleOrganizationTypeChange(event); }
    },
  
    {
      type: 'wrapperDiv',
      hidden: true,
      ref: el => this.operatorOrganizationBox = el,
      children: [
        {
          type: 'custom',
          content: (
            <sk-search-form
              guid="org-search-form"
              submitHandler={event => { this.handleOrgNoSearch(event); }}
              label="Søk etter virksomhet"
              placeholder="Tast inn org. nummer"
              button-text="Søk"
              action="/"
              method="post"
              error-message="Du må taste inn et gyldig organisasjonsnummer: 9 sifre"
              pattern="[0-9]{9}"
              ref={el => this.orgSearch = el}>
            </sk-search-form>
          )
        },
        {
          type: 'custom',
          content: (
            <sk-orginfo-block 
              style={{display: 'none'}}
              ref={el => this.orgSearchResult = el}>
            </sk-orginfo-block>
          )
        },
        {
          type: 'custom',
          content: (
            <div 
              class="ribbon ribbon--warning"
              style={{display: 'none'}}
              ref={el => this.orgSearchNoResults = el}>
              <div class="content-wrapper content-wrapper--xxxxxl">
                <h3 class="title title--level-3">Ingen bedrift funnet</h3>
                <p class="paragraph paragraph--normal">
                  Vi fant ingen bedrifter med dette organisasjonsnummeret. Har du skrevet inn korrekt?
                </p>
              </div>
            </div>
          )
        }
      ]
    },
    {
      type: 'wrapperDiv',
      hidden: true,
      ref: el => this.operatorNonOrganizationBox = el,
      children: [
        {
          type: 'text',
          id: 'opname',
          name: 'OperatorName',
          label: 'Foretakets eller foreningens navn',
          placeholder: 'Foretakets eller foreningens navn',
          required: true,
          errorMessage: 'Du må fylle ut navnet til foretaket eller foreningen',
          ref: el => this.operatorName = el
        },
        {
          type: 'text',
          id: 'opaddr',
          name: 'OperatorAdresse',
          label: 'Adresse',
          placeholder: 'Foretakets eller foreningens adresse',
          required: true,
          errorMessage: 'Du må fylle ut adressen til foretaket eller foreningen',
          ref: el => this.operatorAddress = el
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'text',
              id: 'opzip',
              name: 'OperatorZipcode',
              label: 'Postnummer',
              placeholder: 'Postnummer',
              required: true,
              pattern: '[0-9]{4}',
              errorMessage: 'Du må fylle ut et gyldig postnummer: 4 sifre',
              ref: el => this.operatorZipcode = el
            },
            {
              type: 'text',
              id: 'opcity',
              name: 'OperatorCity',
              label: 'Poststed',
              placeholder: 'Poststed',
              required: true,
              errorMessage: 'Du må fylle ut poststed',
              ref: el => this.operatorCity = el
            }
          ]
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'tel',
              id: 'optlf',
              name: 'OperatorTlf',
              label: 'Telefonnummer',
              placeholder: 'Telefonnummer',
              required: true,
              pattern: '[0-9]{8}',
              errorMessage: 'Du må fylle ut et gyldig telefonnummer: 8 sifre',
              ref: el => this.operatorPhone = el
            },
            {
              type: 'email',
              id: 'opemail',
              name: 'OperatorEmail',
              label: 'E-postadresse',
              placeholder: 'E-postadresse',
              required: true,
              errorMessage: 'Du må fylle ut en gyldig e-postadresse',
              ref: el => this.operatorEmail = el
            }
          ]
        },
        {
          type: 'text',
          id: 'seekermunicipality',
          name: 'SeekerMunicipality',
          label: 'Skattekommune',
          placeholder: 'Skattekommune',
          required: true,
          errorMessage: 'Du må fylle ut skattekommune',
          ref: el => this.operatorMunicipality = el
        },
        {
          type: 'text',
          id: 'seekerbanknumber',
          name: 'SeekerBanknr',
          label: 'Kontonummer',
          placeholder: 'Kontonummer',
          required: true,
          pattern: "[0-9]{11}",
          errorMessage: 'Du må fylle ut et gyldig bankkontonummer: 11 sifre',
          ref: el => this.operatorBankAccount = el
        }
      ]
    },
    {
      type: 'custom',
      content: (
        <div class="form-section-header" style={{margin: '1rem 0'}}>
          <h2 class="form-section-header__name" style={{margin: '0'}}>Skjenkestedet</h2>
        </div>
      )
    },
    {
      type: 'text',
      id: 'salesname',
      name: 'SalesName',
      label: 'Skjenkestedets navn',
      placeholder: 'Skjenkestedets navn',
      required: true,
      errorMessage: 'Du må fylle ut skjenkestedets navn'
    },
    {
      type: 'text',
      id: 'salesaddr',
      name: 'SalesAdresse',
      label: 'Adresse',
      placeholder: 'Skjenkestedets adresse',
      required: true,
      errorMessage: 'Du må fylle ut adressen til skjenkestedet'
    },
    {
      type: 'wrapperHalves',
      children: [
        {
          type: 'text',
          id: 'saleszip',
          name: 'SalesZipcode',
          label: 'Postnummer',
          placeholder: 'Postnummer',
          required: true,
          pattern: '[0-9]{4}',
          errorMessage: 'Du må fylle ut et gyldig postnummer: 4 sifre'
        },
        {
          type: 'text',
          id: 'salescity',
          name: 'SalesCity',
          label: 'Poststed',
          placeholder: 'Poststed',
          required: true,
          errorMessage: 'Du må fylle ut poststed'
        }
      ]
    },
    {
      type: 'wrapperDiv',
      hidden: true,
      ref: el => this.actualSalesLastYearBox = el,
      children: [
        {
          type: 'custom',
          content: (
            <div class="form-section-header" style={{margin: '1rem 0'}}>
              <h2 class="form-section-header__name" style={{margin: '0'}}>Faktisk salgsvolum i fjor</h2>
            </div>
          )
        },
        {
          type: 'custom',
          content: (
            <h3 class="title title--level-4">Driftsperiode</h3>
          )
        },
        {
          type: 'radio',
          id: 'delivered-year',
          name: 'DriftPeriodLastYear',
          label: 'Hele året',
          value: '1',
          ref: el => this.periodLastYearCheckbox = el,
          onChange: event => { this.handlePeriodChange(event); }
        },
        {
          type: 'radio',
          id: 'delivered-partyear',
          name: 'DriftPeriodLastYear',
          label: 'Deler av året',
          value: '2',
          ref: el => this.periodPartialYearCheckbox = el,
          onChange: event => { this.handlePeriodChange(event); }
        },
        {
          type: 'wrapperHalves',
          hidden: true,
          ref: el => this.partialYearBox = el,
          children: [
            {
              type: 'date',
              id: 'voldatefrom',
              name: 'VolDateFrom',
              label: 'Fra og med',
              required: true,
              errorMessage: 'Du må velge en fradato',
              ref: el => this.salesVolumeDateFrom = el
            },
            {
              type: 'date',
              id: 'voldateto',
              name: 'VolDateTo',
              label: 'Til og med',
              required: true,
              errorMessage: 'Du må velge en tildato',
              ref: el => this.salesVolumeDateTo = el
            }
          ]
        },
        {
          type: 'number',
          id: 'totallowliterslastyear',
          name: 'TotLowAlcoholLitersLastyear',
          label: 'Antall liter (høyst 4.7%)',
          required: true,
          errorMessage: 'Du må fylle ut antall liter alkohol (høyst 4.7%) solgt',
          step: '1'
        },
        {
          type: 'number',
          id: 'totalhighliterslastyear',
          name: 'TotHighAlcoholLitersLastyear',
          label: 'Antall liter (mellom 4.7% og 22%)',
          required: true,
          errorMessage: 'Du må fylle ut antall liter alkohol (mellom 4.7% og 22%) solgt',
          step: '1'
        }
      ]
    },
    {
      type: 'wrapperDiv',
      hidden: true,
      ref: el => this.expectedSalesBox = el,
      children: [
        {
          type: 'custom',
          content: (
            <div class="form-section-header" style={{margin: '1rem 0'}}>
              <h2 class="form-section-header__name" style={{margin: '0'}}>Forventet salgsvolum i år</h2>
            </div>
          )
        },
        {
          type: 'custom',
          content: (
            <h3 class="title title--level-4">Alkoholholdig drikk med høyst 4.7% alkoholinnhold</h3>
          )
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'number',
              id: 'estliterslowcurrentyear',
              name: 'EstAlcoholLowLitersCurrentYear',
              label: 'Antall liter',
              required: true,
              errorMessage: 'Du må fylle ut forventet salgsvolum i antall liter',
              step: '1',
              onChange: event => { this.handleLowLitersEstimatedChange(event); }
            },
            {
              type: 'custom',
              content: (
                <p class="paragraph paragraph--normal" style={{marginTop: '2.5rem'}}>Gebyr: <span>{this.totalLowTaxAmount}</span></p>
              )
            },
          ]
        },
        {
          type: 'custom',
          content: (
            <h3 class="title title--level-4" style={{marginTop: '2rem'}}>Alkoholholdig drikk mellom 4.7% og 22% alkoholinnhold</h3>
          )
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'number',
              id: 'estlitershighcurrentyear',
              name: 'EstAlcoholHighLitersCurrentYear',
              label: 'Antall liter',
              required: true,
              errorMessage: 'Du må fylle ut forventet salgsvolum i antall liter',
              step: '1',
              onChange: event => { this.handleHighLitersEstimatedChange(event); }
            },
            {
              type: 'custom',
              content: (
                <p class="paragraph paragraph--normal" style={{marginTop: '2.5rem'}}>Gebyr: <span>{this.totalHighTaxAmount}</span></p>
              )
            },
          ]
        },
        {
          type: 'custom',
          content: (
            <div class="ribbon ribbon--content" style={{marginTop: '2rem'}}>
              <div class="content-wrapper content-wrapper-xxxxxl">
                <p class="paragraph paragraph--intro">Totalgebyr: <span>{this.totalLowTaxAmount + this.totalHighTaxAmount}</span></p>
              </div>
            </div>
          )
        }
      ]
    },
    {
      type: 'wrapperDiv',
      hidden: true,
      ref: el => this.actualSalesBox = el,
      children: [
        {
          type: 'custom',
          content: (
            <div class="form-section-header" style={{margin: '1rem 0'}}>
              <h2 class="form-section-header__name" style={{margin: '0'}}>Faktisk salgsvolum i år</h2>
            </div>
          )
        },
        {
          type: 'date',
          id: 'enddatecurrentyear',
          name: 'EndDateCurrentYear',
          label: 'Dato for opphør av driften',
          errorMessage: 'Du må velge en opphørsdato',
          ref: el => this.endDateCurrentYear = el
        },
        {
          type: 'custom',
          content: (
            <h3 class="title title--level-4" style={{marginTop: '1rem'}}>Alkoholholdig drikk med høyst 4.7% alkoholinnhold</h3>
          )
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'number',
              id: 'literslowcurrentyear',
              name: 'AlcoholLowLitersCurrentYear',
              label: 'Antall liter',
              required: true,
              errorMessage: 'Du må fylle ut faktisk salgsvolum i antall liter',
              step: '1',
              onChange: event => { this.handleLowLitersCurrentYearChange(event); }
            },
            {
              type: 'custom',
              content: <p class="paragraph paragraph--normal" style={{marginTop: '2.5rem'}}>Gebyr: <span>{this.currentLowTaxAmount}</span></p>
            }
          ]
        },
        {
          type: 'custom',
          content: (
            <h3 class="title title--level-4" style={{marginTop: '2rem'}}>Alkoholholdig drikk mellom 4.7% og 22% alkoholinnhold</h3>
          )
        },
        {
          type: 'wrapperHalves',
          children: [
            {
              type: 'number',
              id: 'litershighcurrentyear',
              name: 'AlcoholHighLitersCurrentYear',
              label: 'Antall liter',
              required: true,
              errorMessage: 'Du må fylle ut faktisk salgsvolum i antall liter',
              step: '1',
              onChange: event => { this.handleHighLitersCurrentYearChange(event); }
            },
            {
              type: 'custom',
              content: (
                <p class="paragraph paragraph--normal" style={{marginTop: '2.5rem'}}>Gebyr: <span>{this.currentHighTaxAmount}</span></p>
              )
            }
          ]
        },
        {
          type: 'custom',
          content: (
            <div class="ribbon ribbon--content" style={{marginTop: '2rem'}}>
              <div class="content-wrapper content-wrapper-xxxxxl">
                <p class="paragraph paragraph--intro">Totalgebyr: <span>{this.currentLowTaxAmount + this.currentHighTaxAmount}</span></p>
              </div>
            </div>
          )
        }
      ]
    },
    {
      type: 'custom',
      content: (
        <div class="form-section-header" style={{margin: '1rem 0'}}>
          <h2 class="form-section-header__name" style={{margin: '0'}}>Dokumentasjon</h2>
        </div>
      )
    },
    {
      type: 'custom',
      content: (
        <div class="ribbon ribbon--normal" style={{marginBottom: '2rem'}}>
          <div class="content-wrapper content-wrapper--xxxxxl">
            <h3 class="title title--level-4">Dokumentasjon som skal følge søknaden</h3>

            <ul>
              <li>Revisor/regnskapsførers bekreftelse av faktisk omsetning</li>
              <li>Bekreftelse/omsetningsoppgave fra leverandør(er)</li>
            </ul>
          </div>
        </div>
      )
    },
    {
      type: 'custom',
      content: (
        <h3 class="title title--level-4">Bekreftelse fra revisor/regnskapsfører</h3>
      )
    },
    {
      type: 'file',
      id: 'revisordocfile',
      name: 'RevisorDocFile',
      accept: '*',
      label: 'Trykk for å laste opp revisor/regnskapsførers bekreftelse',
      required: true,
      errorMessage: 'Du må laste opp dette dokumentet for å sende inn skjemaet'
    },
    {
      type: 'custom',
      content: (
        <h3 class="title title--level-4" style={{marginTop: '2rem'}}>Annen dokumentasjon</h3>
      )
    },
    {
      type: 'textarea',
      id: 'docinfotext',
      name: 'DocInfo',
      label: 'Beskrivelse',
      placeholder: 'Beskrivelse av annen dokumentasjon'
    },
    {
      type: 'file',
      id: 'docfile',
      name: 'DocFile',
      accept: '*',
      label: 'Trykk for å laste opp annen dokumentasjon'
    }
  ];

  handleContextChange (event) {
    if (event.target.value === '1') {
      this.actualSalesLastYearBox.style.display = 'block';
      this.expectedSalesBox.style.display = 'block';
      this.actualSalesBox.style.display = 'none';
    }

    if (event.target.value === '2') {
      this.actualSalesLastYearBox.style.display = 'block';
      this.expectedSalesBox.style.display = 'none';
      this.actualSalesBox.style.display = 'block';
    }
  }

  handleOrganizationTypeChange (event) {
    if (event.target.value === '1') {
      this.operatorOrganizationBox.style.display = 'block';
      this.operatorNonOrganizationBox.style.display = 'none';
      this.operatorName.required = false;
      this.operatorAddress.required = false;
      this.operatorZipcode.required = false;
      this.operatorCity.required = false;
      this.operatorPhone.required = false;
      this.operatorEmail.required = false;
      this.operatorMunicipality.required = false;
      this.operatorBankAccount.required = false;
    }

    if (event.target.value === '2') {
      this.operatorOrganizationBox.style.display = 'none';
      this.operatorNonOrganizationBox.style.display = 'block';
      this.operatorName.required = true;
      this.operatorAddress.required = true;
      this.operatorZipcode.required = true;
      this.operatorCity.required = true;
      this.operatorPhone.required = true;
      this.operatorEmail.required = true;
      this.operatorMunicipality.required = true;
      this.operatorBankAccount.required = true;
    }
  } 
  

  handlePeriodChange (event) {
    if (event.target.value === '1') {
      this.partialYearBox.style.display = 'none';
      this.salesVolumeDateFrom.required = false;
      this.salesVolumeDateTo.required = false;
    }

    if (event.target.value === '2') {
      this.partialYearBox.style.display = 'block';
      this.salesVolumeDateFrom.required = true;
      this.salesVolumeDateTo.required = true;
    }
  }

  handleLowLitersEstimatedChange (event) {
    this.totalLowTaxAmount = event.target.value * this.alcoholTaxLow;
  }

  handleHighLitersEstimatedChange (event) {
    this.totalHighTaxAmount = event.target.value * this.alcoholTaxHigh;
  }

  handleLowLitersCurrentYearChange (event) {
    this.currentLowTaxAmount = event.target.value * this.alcoholTaxLow;
  }

  handleHighLitersCurrentYearChange (event) {
    this.currentHighTaxAmount = event.target.value * this.alcoholTaxHigh;
  }
  
  render () {
    return (
      <form id="altinnForm" 
            action={this.action} 
            method="post" 
            enctype="multipart/form-data"
            ref={el => this.form = el} 
            onSubmit={event => { this.handleSubmit(event); }} 
            novalidate>
        <div class="form form--accessible">
          <div class="content-wrapper content-wrapper--m">
            <div class="userinfo">
              <input type="checkbox" 
                      tabindex="-1" 
                      id="userinfo-checkbox" />
              <label htmlFor="userinfo-checkbox" 
                      role="tree" 
                      aria-controls="userinfo-content" 
                      aria-expanded="false" 
                      class="userinfo__toggle">
                <span class="userinfo__toggle__title">Vi har følgende informasjon om deg</span>
              </label>

              <div class="userinfo__content" 
                    id="userinfo-content">
                <p>
                  Fra Folkeregisteret og Kontakt- og reservasjonsregisteret har vi hentet følgende informasjon om deg som vil brukes i denne henvendelsen:
                </p>

                <table>
                  <tbody>
                    <tr>
                      <td><strong>Navn:</strong>
                      </td>
                      <td style={{paddingLeft: '8px'}}>
                        <span id="name">{this.userName}</span>
                      </td>
                    </tr>
                    <tr>
                      <td><strong>Telefon:</strong>
                      </td>
                      <td style={{paddingLeft: '8px'}}>
                        <span id="phone">{this.userPhone}</span>
                      </td>
                    </tr>
                    <tr>
                      <td><strong>E-post:</strong>
                      </td>
                      <td style={{paddingLeft: '8px'}}>
                        <span id="email">{this.userEmail}</span>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <p>
                  Dersom kontaktinformasjonen ikke er korrekt, kan du gå til <a href={'https://brukerprofil-ver2.difi.no/minprofil/?goto=' + window.location} title="Lenke til Kontakt- og reservasjonsregisteret" class="link link--normal link--external" target="_blank">Kontakt- og reservasjonsregisteret</a> for å endre.
                </p>
              </div>
            </div>
          </div>

          <div class="content-wrapper content-wrapper--m">
            <div class="form-grid">
              {createFormElements(this.alcoholLicenseSalesSpec)}
            </div>
          </div>
          

          <div class="content-wrapper content-wrapper--m">
            <div class="ribbon ribbon--normal">
              <div class="content-wrapper content-wrapper--xxxxxl">
                <div class="warning">
                  <p>
                    Du vil motta kvittering på innsendt søknad på e-postadressen <strong>{this.userEmail}</strong>. Dersom kontaktinformasjonen ikke er korrekt, kan du gå til <a href={'https://brukerprofil-ver2.difi.no/minprofil/?goto=' + window.location} title="Lenke til Kontakt- og reservasjonsregisteret" class="link link--normal link--external" target="_blank">Kontakt- og reservasjonsregisteret</a> for å endre.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="content-wrapper content-wrapper--m">
            <div class="ribbon ribbon--warning hidden" 
                  id="form-warning" 
                  ref={el => this.submitError = el} 
                  style={{display: 'none'}}>
              <div class="content-wrapper content-wrapper--xxxxxl">
                <div class="warning">
                  <p>NB! Du må fylle ut alle feltene før du kan sende inn meldingen.</p>
                </div>
              </div>
            </div>
          </div>

          <div class="content-wrapper content-wrapper--m">
            <div class="form__section">
              <div class="form__section__actions">
                <div class="action-bar">
                  <div class="action-bar__group action-bar__group--primary">
                    <div class="action-bar__action">
                      <button class="button button--primary" 
                              type="submit" 
                              id="submitForm"
                              ref={el => this.submitButton = el}>
                        <span class="button__text">
                          Send inn
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="action-bar__group action-bar__group--secondary">
                    <div class="action-bar__action">
                      <a class="link" 
                          href="/" 
                          id="abort-submission"
                          ref={el => this.abortLink = el}
                          onClick={event => { this.abortSubmission(event); }}>
                        <span class="link__text">Avbryt</span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    );
  }
}