hsbalar / ngx-recursive-form Goto Github PK

View Code? Open in Web Editor NEW

38.0 4.0 10.0 2.58 MB

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

Home Page: https://www.hiteshbalar.com/ngx-recursive-form/

License: MIT License

JavaScript 4.25% TypeScript 66.05% HTML 27.30% CSS 2.41%

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

ngx-recursive-form's Introduction

Ngx Recursive Form

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

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

ngx-recursive-form's People

Contributors

Stargazers

Watchers

Forkers

amitmerchant1990 harishb2 shivamdhawan9197 soon-tw coderbase-it rampaul770 mohsinayaz muzaffarmahmood kiranlasure githubajaydhage

ngx-recursive-form's Issues

Three or more level nested forms

[
    {
        "name": "dataSource",
        "label": "Label",
        "defaultValue": [
            {
                "name": "name1",
                "label": "Label",
                "mobile": 12345,
                "address": "address1",
                "verified": {
                    "status": true,
                    "entity": "entity",
                    "entityType": "entityType",
                    "comment": "comment"
                }
            },
            {
                "name": "name2",
                "label": "Label",
                "mobile": 456789,
                "address": "address2",
                "verified": {
                    "status": true,
                    "entity": "entity2",
                    "entityType": "entityType2",
                    "comment": "comment2"
                }
            }
        ],
        "type": "array",
        "parameters": [
            {
                "name": "name",
                "label": "Label",
                "defaultValue": "name1",
                "type": "string"
            },
            {
                "name": "mobile",
                "label": "Label",
                "defaultValue": 12345,
                "type": "number"
            },
            {
                "name": "address",
                "label": "Label",
                "defaultValue": "address1",
                "type": "string"
            },
            {
                "name": "verified",
                "label": "Label",
                "parameters": [
                    {
                        "name": "status",
                        "label": "Label",
                        "defaultValue": true,
                        "type": "boolean"
                    },
                    {
                        "name": "entity",
                        "label": "Label",
                        "defaultValue": "entity",
                        "type": "string"
                    },
                    {
                        "name": "entityType",
                        "label": "Label",
                        "defaultValue": "entityType",
                        "type": "string"
                    },
                    {
                        "name": "comment",
                        "label": "Label",
                        "defaultValue": "comment",
                        "type": "string"
                    }
                ],
                "type": "object"
            }
        ]
    }
]

This json schema is not rendered by ngx-recursive-form

tested at : https://www.hiteshbalar.com/ngx-recursive-form/

the original JSON is


 [{
  name: 'name1',
  mobile: 12345,
  address: 'address1',
  verified: {
    status: true,
    entity: 'entity',
    entityType: 'entityType',
    comment: 'comment',
  }
},
{
  name: 'name2',
  mobile: 456789,
  address: 'address2',
  verified: {
    status: true,
    entity: 'entity2',
    entityType: 'entityType2',
    comment: 'comment2',
  }
}]

can you please help ?

Regarding the FormArray

Hello, I have been trying to create FormArray with this library. but i am unclear how it handles array

while generating form -- does it create FormArray or FormGroup if an array is present in json?

What I tried?
https://www.hiteshbalar.com/ngx-recursive-form/

{
                "order": 3,
                "name": "language",
                "label": "Languages you know",
                "type": "array",
                "parameters": [
                    {
                        "name": "languageName",
                        "label": "Language Name",
                        "type": "string",
                        "placeholder": "Input language name"
                    },
                    {
                        "name": "experience",
                        "label": "Total Experience",
                        "type": "number",
                        "placeholder": "Total experience in year"
                    }
                ],
                "defaultValue": [
                    {
                        "languageName": "JavaScript",
                        "experience": 4
                    },
                    {
                        "languageName": "has",
                        "experience": 3
                    },
                    {
                        "languageName": "not",
                        "experience": 2
                    }
                ]
            }

This works.
But I do this in my componet files is returned as FormGroup. Instead it should be FormArray.

Please clarify.

Support for grid

How to implment grid column class to form element?

hsbalar / ngx-recursive-form Goto Github PK

ngx-recursive-form's Introduction

Ngx Recursive Form

Install

Import the NgxRecursiveFormModule:

Initialize form in your component.ts file:

Create tag in your component.html file:

License

ngx-recursive-form's People

Contributors

Stargazers

Watchers

Forkers

ngx-recursive-form's Issues

Three or more level nested forms

Regarding the FormArray

Support for grid

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent