Getting started

Supports only Angular 16 and above.

Installation

Install from npm 🔗

npm i ng-dynamic-json-form

Import styles

Import the styles with one of the following method.

"styles": [
    ...
    "node_modules/ng-dynamic-json-form/styles/styles.scss"
],

...
@use "ng-dynamic-json-form/styles/styles.scss";

// Use @use instead of @import
// See https://sass-lang.com/documentation/at-rules/import

Usage

Import the NgDynamicJsonFormComponent.

import { NgDynamicJsonFormComponent } from 'ng-dynamic-json-form';

...
@Component({
  ...,
  imports: [
    ...,
    NgDynamicJsonFormComponent,
  ],
})

Pass the configs to the ng-dynamic-json-form component, a simple form will be built. See Configs for more.

<ng-dynamic-json-form [configs]="configs"></ng-dynamic-json-form>

configs = [
  {
    formControlName: "name",
    label: "Name",
    type: "text",
  },
];

Add UI library

We can use component from the other ui library in the entire form. See Provide UI Components.

Form Binding

Using FormControl

<ng-dynamic-json-form
  ...
  [formControl]="control"
></ng-dynamic-json-form>

control = new FormControl();

Using FormGroup

<ng-dynamic-json-form
  ...
  (formGet)="onFormGet($event)"
></ng-dynamic-json-form>

form?: UntypedFormGroup;

onFormGet(e: UntypedFormGroup): void {
  this.form = e;
}

Event Listening

After the form is generated, the formGet event will emit an UntypedFormGroup. We can get the form and listen to the valueChanges event.

form?: UntypedFormGroup;

onFormGet(e: UntypedFormGroup): void {
  this.form = e;
  this.form.valueChanges.pipe(
    ...
  ).subscribe();
}

Or listen to only specific control and do specific task.

form?: UntypedFormGroup;

onFormGet(e: UntypedFormGroup): void {
  this.form = e;
  this.form.controls.name.valueChanges.pipe(
    tap(x => {
      if (x.length > 10) {
        ...
      }
    })
  ).subscribe();
}