Runtime Methods

setData and setMeta let you push state changes into a mounted form without re-initialising it. Use them to pre-fill fields after an async fetch, sync the form with external state, or toggle meta-driven behaviour at runtime.

Both methods replace their respective state objects entirely — there is no deep merge.

Getting a reference to the form

Each framework has its own mechanism for obtaining a handle to the form component instance:

React

import { useRef } from 'react';
import { GuiForm } from '@golemui/gui-react';
import type { FormComponentHandle } from '@golemui/react';

export function MyForm({ config }) {
  const formRef = useRef<FormComponentHandle>(null);

  return <GuiForm ref={formRef} config={config} />;
}

Angular

import { Component, ViewChild } from '@angular/core';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [FormComponent],
  selector: 'app-my-form',
  template: `<gui-form #myForm [config]="config"></gui-form>`,
})
export class MyFormComponent {
  @ViewChild('myForm') form!: FormComponent;

  protected config = { /* ... */ };
}

Lit

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { FormElement } from '@golemui/gui-lit';

@customElement('my-app')
export class MyApp extends LitElement {
  @query('gui-form') private form!: FormElement;

  override createRenderRoot() { return this; }

  override render() {
    return html`<gui-form .config=${this.config}></gui-form>`;
  }
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { GuiForm, type GuiFormHandle } from '@golemui/gui-vue';

const formRef = ref<GuiFormHandle | null>(null);
const config = { /* ... */ };
</script>

<template>
  <GuiForm ref="formRef" :config="config" />
</template>

Vanilla JS

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';

const form = document.getElementById('app-form');
form.config = { /* ... */ };
// `form.setData(...)` and `form.setMeta(...)` are available directly on the element.

setData

Replaces the form’s current data state. All field values are overwritten with the supplied object.

React

import { useRef } from 'react';
import { GuiForm } from '@golemui/gui-react';
import type { FormComponentHandle } from '@golemui/react';

export function MyForm({ config }) {
  const formRef = useRef<FormComponentHandle>(null);

  async function loadUser(userId: string) {
    const user = await fetchUser(userId);
    formRef.current?.setData({ name: user.name, email: user.email });
  }

  return (
    <>
      <button onClick={() => loadUser('42')}>Load user</button>
      <GuiForm ref={formRef} config={config} />
    </>
  );
}

Angular

import { Component, ViewChild } from '@angular/core';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [FormComponent],
  selector: 'app-my-form',
  template: `
    <button (click)="loadUser('42')">Load user</button>
    <gui-form #myForm [config]="config"></gui-form>
  `,
})
export class MyFormComponent {
  @ViewChild('myForm') form!: FormComponent;

  protected config = { /* ... */ };

  async loadUser(userId: string) {
    const user = await this.userService.fetch(userId);
    this.form.setData({ name: user.name, email: user.email });
  }
}

Lit

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { FormElement } from '@golemui/gui-lit';

@customElement('my-app')
export class MyApp extends LitElement {
  @query('gui-form') private form!: FormElement;

  override createRenderRoot() { return this; }

  async loadUser(userId: string) {
    const user = await fetchUser(userId);
    this.form.setData({ name: user.name, email: user.email });
  }

  override render() {
    return html`
      <button @click=${() => this.loadUser('42')}>Load user</button>
      <gui-form .config=${this.config}></gui-form>
    `;
  }
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { GuiForm, type GuiFormHandle } from '@golemui/gui-vue';

const formRef = ref<GuiFormHandle | null>(null);
const config = { /* ... */ };

async function loadUser(userId: string) {
  const user = await fetchUser(userId);
  formRef.value?.setData({ name: user.name, email: user.email });
}
</script>

<template>
  <button @click="loadUser('42')">Load user</button>
  <GuiForm ref="formRef" :config="config" />
</template>

Vanilla JS

index.html

<button id="load-btn">Load user</button>
<gui-form id="app-form"></gui-form>

src/main.js

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';

const form = document.getElementById('app-form');
form.config = { /* ... */ };

async function loadUser(userId) {
  const user = await fetchUser(userId);
  form.setData({ name: user.name, email: user.email });
}

document.getElementById('load-btn').addEventListener('click', () => loadUser('42'));

setMeta

Replaces the form’s current meta state. Meta values are available inside the form definition for template interpolation ({{$meta.key}}) and conditions ($meta.key === true).

React

import { useRef } from 'react';
import { gui } from '@golemui/gui-shared';
import { GuiForm } from '@golemui/gui-react';
import type { FormComponentHandle } from '@golemui/react';

const formDef = [
  gui.displays.alert('status-banner', {
    text: 'Connection: {{$meta.status}}',
  }),
];

const config = { formDef, meta: { status: 'offline' } };

export function MyForm() {
  const formRef = useRef<FormComponentHandle>(null);

  function goOnline() {
    formRef.current?.setMeta({ status: 'online' });
  }

  return (
    <>
      <button onClick={goOnline}>Connect</button>
      <GuiForm ref={formRef} config={config} />
    </>
  );
}

Angular

import { Component, ViewChild } from '@angular/core';
import { gui } from '@golemui/gui-shared';
import { FormComponent } from '@golemui/gui-angular';

@Component({
  imports: [FormComponent],
  selector: 'app-my-form',
  template: `
    <button (click)="goOnline()">Connect</button>
    <gui-form #myForm [config]="config"></gui-form>
  `,
})
export class MyFormComponent {
  @ViewChild('myForm') form!: FormComponent;

  protected config = {
    formDef: [
      gui.displays.alert('status-banner', {
        text: 'Connection: {{$meta.status}}',
      }),
    ],
    meta: { status: 'offline' },
  };

  goOnline() {
    this.form.setMeta({ status: 'online' });
  }
}

Lit

import { LitElement, html } from 'lit';
import { customElement, query } from 'lit/decorators.js';
import { gui } from '@golemui/gui-shared';
import { FormElement } from '@golemui/gui-lit';

@customElement('my-app')
export class MyApp extends LitElement {
  @query('gui-form') private form!: FormElement;

  config = {
    formDef: [
      gui.displays.alert('status-banner', {
        text: 'Connection: {{$meta.status}}',
      }),
    ],
    meta: { status: 'offline' },
  };

  override createRenderRoot() { return this; }

  goOnline() {
    this.form.setMeta({ status: 'online' });
  }

  override render() {
    return html`
      <button @click=${() => this.goOnline()}>Connect</button>
      <gui-form .config=${this.config}></gui-form>
    `;
  }
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { gui } from '@golemui/gui-shared';
import { GuiForm, type GuiFormHandle } from '@golemui/gui-vue';

const formRef = ref<GuiFormHandle | null>(null);

const config = {
  formDef: [
    gui.displays.alert('status-banner', {
      text: 'Connection: {{$meta.status}}',
    }),
  ],
  meta: { status: 'offline' },
};

function goOnline() {
  formRef.value?.setMeta({ status: 'online' });
}
</script>

<template>
  <button @click="goOnline">Connect</button>
  <GuiForm ref="formRef" :config="config" />
</template>

Vanilla JS

index.html

<button id="connect-btn">Connect</button>
<gui-form id="app-form"></gui-form>

src/main.js

import '@golemui/gui-components/index.css';
import '@golemui/gui-lit';
import { gui } from '@golemui/gui-shared';

const form = document.getElementById('app-form');
form.config = {
  formDef: [
    gui.displays.alert('status-banner', {
      text: 'Connection: {{$meta.status}}',
    }),
  ],
  meta: { status: 'offline' },
};

function goOnline() {
  form.setMeta({ status: 'online' });
}

document.getElementById('connect-btn').addEventListener('click', goOnline);

API reference

Method	Signature	Description
setData	(data: Record<string, any>) => void	Replaces the form’s data state. All field values are overwritten.
setMeta	(meta: Record<string, any>) => void	Replaces the form’s meta state. Used in template interpolations and conditions.

Note

Both methods replace the entire state object. To preserve values that are not being updated, spread the current state before calling: form.setData({ ...currentData, name: 'Alice' }).

See also

• Features / Form Events — reacting to widget events emitted by the form.
• Form Definition API / Runtime Functions — reactive props computed from live form state.