Skip to content
Design System

ui-form-interpreter

@mmm/ui-form-interpreter

Installation

Terminal window
pnpm add @mmm/ui-form-interpreter

Peer Dependencies muessen im Service vorhanden sein:

  • "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.3.16 || ^21.2.16"
  • "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.3.16 || ^21.2.16"
  • "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.3.16 || ^21.2.16"
  • "@angular/router": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.3.16 || ^21.2.16"
  • "@angular/cdk": "^21.0.0"
  • "@mmm/designsystem": "^1.9.0"
  • "rxjs": "^7.8.2"

Schnellstart

Modul registrieren

Das Modul kann über das imports-Array einer Komponente sowie als Provider eingebunden werden.

Service konfigurieren

Um ein Formular mittels des Forminterpreters anzeigen zu können, muss das Schema dem FormInterpreterService übergeben werden. Hierfŭr kann der setSchema-Aufruf des InterpreterService verwendet werden.

const schema: TFormSchema = {
  "id": "signup",
  "version": 1,
  "title": "Newsletter Sign-up",
  "description": "Example",
  "boxed": "true", // neu, per default true, zeigt boxed design an. false, versteckt es
  "hideProgress": "false", // default false, true für reguläre formulare
  "sections": [
    {
      "key": "base",
      "title": "Basic Data",
      "fields": [
        { "key": "newsletter", "type": "checkbox", "label": "Subscribe to newsletter", "defaultValue": false },
        {
          "key": "email",
          "type": "input",
          "label": "E-mail",
          "placeholder": "you@example.com",
          "requiredIf": { "field": "newsletter", "op": "==", "value": true },
          "validators": [{ "name": "email" }],
          "visibleIf": { "field": "newsletter", "op": "==", "value": true }
        },
        {
          "key": "country",
          "type": "select",
          "label": "Country",
          "options": {
            "source": "static",
            "items": [
              { "value": "DE", "label": "Germany" },
              { "value": "AT", "label": "Austria" }
            ]
          }
        },
        {
          "key": "zip",
          "type": "input",
          "label": "ZIP",
          "validators": [{ "name": "pattern", "pattern": "^\\d{5}$" }],
          "enabledIf": { "any": [
            { "field": "country", "op": "==", "value": "DE" },
            { "field": "country", "op": "==", "value": "AT" }
          ] }
        },
        { "key": "start", "type": "date", "label": "Start date" },
        {
          "key": "end",
          "type": "date",
          "label": "End date",
          "validators": [{ "name": "dateBounds", "minField": "start" }]
        }
      ]
    }
  ],
  "submit": { "label": "Submit" }
}


this.formInterpreter.setSchema(schema)

Dem Schema können auch Standardwerte für Formwerte übergeben werden:

this.formInterpreter.setSchema(schema, {email: "test@example.org"})

Komponentenbindings

Standardmäßig werden verschiedene Komponenten des Designsystems mittels des Feldtyps zu Formfeldern oder Layouts gerendert. Folgende Liste wird out of the box unterstützt:

Sollten weitere Komponenten benötigt werden oder aber eine der Standardkomponenten überschrieben werden, können eigene Komponenten für Feldtypen registriert werden. Die zu registrierende Komponent muss entweder FormBindingBase (für die Verwendung als Formularfeld) oder BindingBase erweitern (für arbiträre Komponenten wie beispielsweise ein Video oder ein Hilfsrechner, die nicht Teil des Formulars sind und nicht validiert werden müssen). Zur Registrierung kann folgender Aufruf verwendet werden:

this.interpreterService.registerCustomNode({
    key: 'custom',
    component: CustomComponent
})

Exports

Das Paket exportiert:

  • FormInterpreterModule
  • FormInterpreterService
  • TFormSchema
  • TExpr
  • TValidator
  • TOptionItem
  • TOptions
  • TMask
  • TField
  • TSection
  • evaluateExpr
  • getValueAtPath
  • BindingBase
  • FormBindingBase
  • Interpreter
  • FjGroup
  • FjFieldRenderer
  • FjSubgroup

Entwicklung

Build:

Terminal window
pnpm build

Publish passiert ueber die Bitbucket-Pipeline.

Hinweise