Angular

Installation

npm i @golemui/core @golemui/angular @golemui/gui-angular --save

Styles

Import the core styles in your styles.scss or angular.json:

@import '@golemui/core/styles/index.css';

Usage

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { golemForm } from '@golemui/gui-shared';
import { FormComponent, widgetLoaders } from '@golemui/gui-angular';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form
    [formDef]="formDef"
    [data]="formData"
    [customWidgetLoaders]="widgetLoaders"
  ></gui-form>`,
})
export class MyFormComponent {
  protected formDef = golemForm().create({
    form: [
      { kind: 'input', type: 'textinput', path: 'username', label: 'Username' },
    ],
  });
  protected formData = { username: '' };
  protected widgetLoaders = widgetLoaders;
}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormComponent, widgetLoaders } from '@golemui/gui-angular';
import formDef from './my-form.json';

@Component({
  imports: [CommonModule, FormComponent],
  selector: 'app-my-form',
  template: `<gui-form
    [formDef]="formDef"
    [data]="formData"
    [customWidgetLoaders]="widgetLoaders"
  ></gui-form>`,
})
export class MyFormComponent {
  protected formDef = formDef;
  protected formData = { username: '' };
  protected widgetLoaders = widgetLoaders;
}

Component Inputs

Input	Type	Description
formDef	Form	The form definition object
data	object	Initial form data
widgetLoaders	WidgetLoaders	Map of widget type loaders (e.g. GolemUI components)
validators	ValidatorFn	Validator function (from initValidators())
customValidators	CustomValidatorSchemas	Custom validator schemas
validateOn	ValidateOn	When to trigger validation
dependencies	Dependencies	External dependencies (e.g. markdown parser)
localization	Localization	i18n/localization configuration

See Configuration for details on each optional prop.