# mf-dynamic-form

> Angular component that creates a form with validation from given spec

Latest version **2.10.0** (published 2022-02-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install mf-dynamic-form
pnpm add mf-dynamic-form
yarn add mf-dynamic-form
bun add mf-dynamic-form
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.10.0 |
| Published | 2022-02-08 |
| First published | 2021-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 605.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Maintainers | mbtw |
| Keywords | form, dynamic, angular |

## Links

- npm: https://www.npmjs.com/package/mf-dynamic-form
- Repository: https://github.com/moolsbytheway/mf-dynamic-form
- Homepage: https://moolsbytheway.github.io/mf-dynamic-form
- Issues: https://github.com/moolsbytheway/mf-dynamic-form/issues
- npm.io page: https://npm.io/package/mf-dynamic-form

## Dependencies (2)

- [tslib](https://npm.io/package/tslib.md) ^2.0.0
- [ng-dynamic-component](https://npm.io/package/ng-dynamic-component.md) ^8.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.10.0 (latest) — 2022-02-08
- 2.9.2 — 2022-01-21
- 2.9.1 — 2022-01-06
- 2.9.0 — 2022-01-06
- 2.8.1 — 2022-01-06
- 2.8.0 — 2022-01-06
- 2.7.0 — 2022-01-06
- 2.6.2 — 2021-12-31
- 2.6.1 — 2021-12-30
- 2.6.0 — 2021-12-28
- 2.5.1 — 2021-12-23
- 2.5.0 — 2021-12-20
- 2.4.0 — 2021-11-04
- 2.3.1 — 2021-10-29
- 2.3.0 — 2021-10-25
- … 71 more at https://npm.io/package/mf-dynamic-form/versions

## README

## Dynamic form (Wrapper around Angular Reactive forms)

### NOTE: THIS IS STILL UNDER ACTIVE DEVELOPPEMENT

#### Contact me at moolsbytheway [at] gmail [dot] com for contribution or assistance

### Roadmap

- Drop dependency for ng-dnamic-component, support dynamic-components natively
- re-design how the stepper is implemented

### Demo (v1)

https://moolsbytheway.github.io/mf-dynamic-form

### Install

NPM package: https://www.npmjs.com/package/mf-dynamic-form

```
npm install mf-dynamic-form
```

# Version 2.x

### Usage example

### Template

```html
<h3>Form</h3>
<div class="container">
  <div>
    <mf-dynamic-form [form]="form"
                     [i18n]="i18n"
                     (formSubmitted)="onSubmit($event)"
    ></mf-dynamic-form>

  </div>
  <pre *ngIf="formData">
    {{  formData | json}}
  </pre>
</div>
```

### TS

```typescript
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  i18n = {
    next: 'Suivant',
    cancel: 'Annuler',
    previous: 'Précedent',
    save: 'Enregistrer',
    errors: {
      isRequired: 'Ce champs est obligatoire ',
      minLength: 'La longueur minimal est de',
      maxLength: 'La longueur maximal est de',
      emailInvalid: 'Email invalid',
      alphanumeric: 'Ce champs doit être Alphanumeric',
      passwordMismatch: 'Les mots de passe ne sont pas identiques'
    }
  };

  form: MfForm = {
    // @ts-ignore
    customControls: {
      unitsFormControl: ExempleCustomFormControlComponent
    },
    steps: [
      {
        label: 'Informations de la commande',
        iconClass: 'fa fa-truck',
        sections: [
          {
            label: 'Informations de la commande',
            controls: [
              new TextboxFormControl({
                key: 'firstName',
                label: 'Prénom',
                value: 'Moulaye',
                onChanged: (value, patchValue) => {
                  console.log("new firstName: " + value)
                  patchValue("calculatedValue", Math.random())
                },
                type: TextBoxType.TEXT,
              }),
              new TextboxFormControl({
                key: 'calculatedValue',
                label: 'calculatedValue',
                onChanged: (value) => {
                  console.log("new calculatedValue: " + value)
                },
              }),
              new TextboxFormControl({
                key: 'lastName',
                label: 'Nom',
                type: TextBoxType.TEXT
              }),
              new DropdownFormControl({
                key: 'modeTransport',
                label: 'Mode de transport',
                options: [
                  {label: 'Val1', value: 1},
                  {label: 'Val2', value: 2},
                ]
              }),
              new DropdownFormControl({
                key: 'typeFluxWithTriggerField',
                label: 'Type de flux with Trigger field',
                options$: {
                  triggerField: 'modeTransport',
                  callback: fetchTypeFlux$
                }
              }),
              new DropdownFormControl({
                key: 'typeFluxWithoutTriggerField',
                label: 'Type de flux without Trigger field',
                options$: {
                  callback: (value) => {
                    return new Promise((resolve) => {
                      resolve([
                        {label: 'NO trigger Backend value 1', value: 11},
                        {label: 'NO trigger Backend value 2', value: 22},
                      ])
                    })
                  }
                }
              }),
            ]
          },
        ]
      }, {
        label: 'Informations transport & logistiques',
        sections: [
          {
            label: 'Informations transport & logistiques',
            controls: [
              new TextboxFormControl({
                key: 'info',
                label: 'Commande No',
                type: TextBoxType.NUMBER,
                visibleWhen: [new KeyValueConditionMatcher('firstName', "Moulaye", "EQUALS")],
              }),
            ]
          },
        ]
      }, {
        label: 'Références',
        sections: [
          {
            label: 'Références',
            controls: [
              new TextboxFormControl({
                key: 'sap',
                label: 'SAP No',
                type: TextBoxType.NUMBER,
              }),
            ]
          },
        ]
      }, {
        label: 'Articles',
        sections: [
          {
            label: 'Articles',
            controls: [
              new DynamicFormControl({
                key: 'units',
                component: 'unitsFormControl',
                inputs: {
                  a: 1,
                  b: 2
                }
              }),
            ]
          },
        ]
      }
    ]
  };

  formData: any;

  onSubmit(formData: any) {
    this.formData = formData;
  }
}
```

### Exemple custom form control

```typescript

@Component({
  selector: 'app-units',
  template: `
		<div style="border: 1px dashed gray">
			<p>Units dynamic component , params: a = {{a}} , b = {{b}}</p>
			<label>this is a custom input component<input type="text" (change)="updateInput($event)"/></label>
			<button class="btn btn-primary" (click)="update($event)">save units</button>
		</div>
	`
})
export class ExempleCustomFormControlComponent extends DynamicFormControlComponent {

  @Input()
  a: number;
  @Input()
  b: number;

  value: string;

  updateInput(event) {
    this.value = event.target.value;
  }

  update($event) {
    this.updateFormControlValue(this.value)
  }
}
```

### Additonal `visibleWhen`, `requiredWhen`, `disabledWhen`, `enableWhen` matchers to use with

- Key-value matcher https://github.com/moolsbytheway/mfx-key-value-matcher
- Field presence matcher https://github.com/moolsbytheway/mfx-field-presence-matcher
- Advanced condition expression matcher https://github.com/moolsbytheway/mfx-advanced-condition-matcher

---
_Source: https://npm.io/package/mf-dynamic-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._