Angular recursive form at any level based on your json input.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
projects/ngx-recursive-form
src
.editorconfig
.gitignore
LICENSE
README.md
angular.json
package.json
tsconfig.json
tslint.json

README.md

Ngx Recursive Form

Angular recursive form at any level based on your json input. Demo

image

Install

Note: Ngx recursive form supports only ng-zorro-antd for now. So, you need to install it beforehand.

$ npm install ng-zorro-antd
$ npm install ngx-recursive-form --save

Import the NgxRecursiveFormModule:

import { NgxRecursiveFormModule } from 'ngx-recursive-form';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [NgxRecursiveFormModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Initialize form in your component.ts file:

import { NgxRecursiveFormService } from 'ngx-recursive-form';
import { FormGroup } from '@angular/forms';

public form: FormGroup;
public formJson: any;
constructor(public ngxFormService: NgxRecursiveFormService) {}

ngOnInit() {
  this.ngxFormService.initNgxRecursiveForm(this.formJson) // JSON schema as first parameter, Default JSON value as second parameter (optional)
    .subscribe(res => {
      this.form = res.form;
      this.formJson = res.orderedFormJson;
    }, err => {
      console.log(err);
    });
}

Create tag in your component.html file:

<form nz-form [formGroup]="form" (ngSubmit)="submit()" *ngIf="form">
  <ngx-recursive-form [form]="form" [formJson]="formJson"></ngx-recursive-form>
  <button nz-button type="submit">Submit</button>
</form>

License

MIT