Wizard Form

Demonstrates how the form engine can be extended with custom fields. This example implements a WizardField component that renders multi-step form sections.

Live Demo

Profile

You are now done.

Result

import { Component, EventEmitter, Output, ViewEncapsulation } from '@angular/core';
import { Preforms } from '@preforms/angular/core';
import { NATIVE_FORM_ELEMENTS } from '@preforms/angular/native';
import { FieldGroup, TextField } from '@preforms/ts';

import { WizardFieldComponent } from './wizard.component';
import { WizardField } from './wizard.field';

@Component({
  selector: 'app-extensible-form-wizard',
  template: `<preforms (submittedData)="logData($event)" [fields]="fields" />`,
  imports: [Preforms],
  encapsulation: ViewEncapsulation.None,
  providers: [NATIVE_FORM_ELEMENTS, WizardFieldComponent],
})
export class ExtensibleFormWizardComponent {
  @Output() formChange = new EventEmitter<any>();

  fields = [
    new WizardField({
      fields: [
        new FieldGroup({
          key: 'profile',
          description: 'Fill out your name',
          fields: [
            new TextField({
              key: 'name',
              placeholder: 'Last name, First name',
              required: true,
            }),
          ],
        }),
        new FieldGroup({
          key: 'shipping',
          description: 'Fill out your address',
          fields: [
            new TextField({
              key: 'address',
              placeholder: 'Ex. 1 Main St, New York, NY',
              required: true,
            }),
          ],
        }),
      ],
    }),
  ];

  logData(data: any) {
    this.formChange.emit(data);
  }
}