Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
e2e
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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