https://github.com/hsbalar/ngx-recursive-form

Angular recursive form at any level based on your json input.
https://github.com/hsbalar/ngx-recursive-form

angular6 hacktoberfest ng-zorro-antd reactive-forms recursive-forms

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hsbalar/ngx-recursive-form
• Owner: hsbalar
• License: mit
• Created: 2018-09-11T12:43:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-10-25T09:57:13.000Z (about 4 years ago)
• Last Synced: 2024-08-04T01:05:01.710Z (5 months ago)
• Topics: angular6, hacktoberfest, ng-zorro-antd, reactive-forms, recursive-forms
• Language: TypeScript
• Homepage: https://www.hiteshbalar.com/ngx-recursive-form/
• Size: 2.52 MB
• Stars: 37
• Watchers: 4
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ant-design - ngx-recursive-form - Angular recursive form based on json input built with Ant Design. (Components / Themes)

README

        
# Ngx Recursive Form

Angular recursive form at any level based on your json input. [`Demo`](http://www.hiteshbalar.com/ngx-recursive-form/formx)



### Install

> Note: Ngx recursive form supports only [ng-zorro-antd](https://ng.ant.design/docs/introduce/en) for now. So, you need to install it beforehand.

```bash

$ npm install ng-zorro-antd

$ npm install ngx-recursive-form --save

```

### Import the NgxRecursiveFormModule:

```js

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:

```js

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:

```html

  

  Submit

```

## License

MIT