Prerequisites

Reactive Dynamic Forms will work in angular projects.

Table of Contents

• Step By Step Dynamic Reactive Form Design
• Controls
• Static Binding
• Conditional Binding
• Cascading Dropdown
• Need Help
• Feature Request
• License

Step By Step Dynamic Form Design

1. Install Package

First you need to install @rxweb/reactive-form-validators as the dynamic form package dependent on this package.

> npm install @rxweb/reactive-form-validators

Now, You have to install @rxweb/reactive-dynamic-forms for building the dynamic forms.

> npm install @rxweb/reactive-dynamic-forms

2. Register the Module

We have to register ReactiveFormsModule from @angular/forms package and then RxReactiveFormsModule as well as RxReactiveDynamicFormsModule from the mentioned packages as below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- #1 import module
import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators'; // <-- #2 import module
import { RxReactiveDynamicFormsModule } from '@rxweb/reactive-dynamic-forms'; // <-- #3 import module


import {AppComponent} from './app.component';

@NgModule({
  declarations:[AppComponent],
  imports:[ BrowserModule, 
	FormsModule,
	ReactiveFormsModule, 
	RxReactiveFormsModule,  
  RxReactiveDynamicFormsModule
	] 
  providers: [], 
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Design the Json

The second step is to define the json data which comes from the server. The Json data is stored in the form of serverData.

Just a quick start here we create textbox by mentioning type and name.

serverData: Array<{ [key: string]: any }> = [{
            name:"firstName",
            type:"text"
        }]

4. Create the Form

To Bind the formControl to the user interface, you have to define in the uiBindings.

Note : If you want to change the order of the formControls in the user Interface. You must do it in uiBindings

uiBindings:string[] = ["firstName"];

The Next Step is to create a form using formGroup method of RxDynamicFormBuilder. In that you pass the serverData and dynamicFormConfiguration as below.

ngOnInit() {
     this.dynamicFormBuildConfig = this.formBuilder.formGroup(this.serverData,this.dynamicFormBuilderConfiguration)
  }

5. Html Implementation

The Fourth and last step is to pass the html tag in the template using rxweb-dynamic-form and pass the dynamicFormBuildConfig as rxDynamicForm in the form tag

You must specify viewMode which can be basic, horizontal and advance, based on the bootstrap layout you want.

<form [formGroup]="dynamicFormBuildConfig.formGroup">
        <div viewMode="basic" [rxwebDynamicForm]="dynamicFormBuildConfig" [uiBindings]="uiBindings">
        </div>      
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

Controls

TextBox

To set a control as a textbox pass name and type in serverData.

    serverData = [
        {
            name: "firstName",
            type: "text",
            ui: {
                label: 'First Name'
            }
        }
    ]

Dropdown

To bind a control as a dropdwon pass source in serverData.

 serverData= [{
        name: "gender",
        type: "select",
        source: [{ value: 1, text: "Male" },{ value: 2, text: "Female" }],
        ui: {
            label: 'Gender',
            placeholder: 'Select',
        }
    }]

Note : If you want to bind cascading dropdown please refer this example

checkbox

To bind a control as a checkbox pass source in serverData.

 serverData= [
        {
            name: "confirm",
            type: "checkbox",
            source: [{ value: 1, text: "I accept the terms and conditions" }]
        }
    ]

Note : If you want to bind a multiselect checkbox please refer this example

date

To set a control as a date pass name and type in serverData.

serverData = [{
            name: "dateOfBirth",
             type: "date",
             ui: {
                label: 'Date Of Birth',                      
            }
        
    }]

email

To set a control as a email pass name and type in serverData.

 serverData = [{
            name: "email",
             type: "email",
             ui: {
                label: 'Email Address',                      
            }        
    }]

file

To set a control as a file pass name and type in serverData.

 serverData = [{
        name: "profilePhoto",
        type: "file",
        ui: {
            label: 'Profile Photo'
        }
    }]

password

To set a control as a password pass name and type in serverData.

serverData = [{
        name: "password",
        type: "password",
        ui: {
            label: 'Password'
        }
    }]

radio

To bind a control as a radio pass source in serverData.

   serverData = [{
        name: "gender",
         type: "radio",
         source: [{ value: 1, text: "Male"},{ value: 2, text: "Female" }],
         ui: {
            label: 'Gender'                            
        }
    }]

range

To set a control as a range pass name and type in serverData.

serverData = [{
        name: "price",
        type: "range",
        ui: {
            label: 'Price'
        }
    }]

textarea

To set a control as a textarea pass name and type in serverData.

   serverData = [
        {
            name: "address",
            type: "textarea",
            ui: {
                label: 'Address'
            }
        }
    ]

url

To set a control as a url pass name and type in serverData.

   serverData = [{
        name: "url",
        type: "url",
        ui: {
            label: 'Website Url'
        }
    }]

Static Binding

Class

To apply css class on the particular control, you must pass it in class property.

 serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "class":["form-control-lg"]
            }
        }]

Description

description can be used inside ui binding to display description for the particular formControl in the dynamic-form, To set the description for a particular control object in your dynamic form, you can set the description property statically inside the ui property.

  serverData = [{
            "name":"firstName",
            "type":"text",
            "ui":{
              "description":"Please Enter FirstName"
            }
        }]

Disabled

disabled can be used inside ui binding of to disable the particular control object in the dynamic-form.

    serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "disabled": true
            }
        }]  

focus

focus can be used inside ui binding to set focus on particular control object in the dynamic-form.

  serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "focus": true
            }
        }]

hide

hide can be used inside ui feature to hide the particular control object in the dynamic-form.

  serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "hide": true
            }
        },
        {
            name:"lastName",
            type:"text",
            "ui":{
              "label": "LastName"
            }
        }]

label

label can be used inside ui binding of to generate a label in the dynamic-form.

 serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "label": "FirstName"
            }
        }]

placeholder

placeholder can be used inside ui binding to display placeholder for the particular control object in the dynamic-form.

serverData = [{
            name:"firstName",
            type:"text",
            ui:{
              "placeholder": "FirstName"
            }
        }]

readonly

readonly can be used inside ui binding to convert the particular control object in readonly state in your dynamic-form.

 serverData = [{
            name:"firstName",
            type:"text",
            "ui":{
              "readonly": true
            }
        }]

source

source can be used inside ui binding to bind the sourcedata in the particular control object in your dynamic-form, It can be used in radio, dropdown and checkbox.

 serverData = [ {
      type: 'select',
      name: 'Skills',
      source: [{ text: "Angular", value: "1" }, { text: "MVC", value: "2" }, { text: "React", value: "3" }],
      ui: {
        label: 'Skills',
      }
    }]

value

value property can be used in the ui binding to set a default value for particular control object.

    serverData = [{
            name:"firstName",
            type:"text",            
            value: "John"
            
        }] 

Conditional Binding

Conditional Disable

To disable a control conditionally, You need to pass modelName and pass it into controlConfigModels along with formGroup method. First we need to create a model class and apply condition into it.

user.model.ts

import { FormControlConfig } from '@rxweb/reactive-dynamic-forms';

export class UserModel extends FormControlConfig {

    private _disabled: boolean;

    get disabled() {
        if (this.controlsConfig.age.value >= 18) {
            return false
        }
        else {
            return true
        }
    }

    set disabled(value: boolean) {
        this._disabled = value;
    }
}

Pass the modelName in server json to apply the validation conditionally.

serverData = [
        {
            name: 'age',
            type: 'text',
            ui: {
                label: 'Enter Your age'
            }
        },
        {
            name: 'licenseNumber',
            type: 'text',
            ui: {
                placeholder: "Enter License Number"
            },
            modelName: 'userModel'
        }

    ]

Conditional placeholder

To bind placeholder on the particular control conditionally, You need to pass modelName and pass it into controlConfigModels along with formGroup method.

user.model.ts

import { FormControlConfig } from '@rxweb/reactive-dynamic-forms';

export class UserModel extends FormControlConfig {

    private _placeholder: string;

    get placeholder() {
        if (this.controlsConfig.firstName.value) {
            return "Hi " +this.controlsConfig.firstName.value  + ", Please enter your bio"
        }
        else {
            return "Please enter your bio"
        }
    }

    set placeholder(value: string) {
        this._placeholder = value;
    }
}

Pass the modelName in server json to apply the validation conditionally.

    serverData = [
        {
            name: 'firstName',
            type: 'text',
            ui: {
                label: 'Enter Your First Name'
            }
        },
        {
            name: 'bio',
            type: 'text',
            ui: {
                placeholder: "Enter bio"
            },
            modelName: 'userModel'
        }

    ]

Cascading Dropdown

You can create cascading dropdown with sync and async source binding.

user.model.ts

import { FormControlConfig } from "@rxweb/reactive-dynamic-forms"

export class SourceSyncConditionalModel extends FormControlConfig{

    private _filter: any[];
    
    set filter(value: any[]) {
        this._filter = value;
    }

    get filter() {
        return this._filter.filter(t => t.countryId == this.controlsConfig.country.value);
    }
}

Pass the modelName in server json to bind the cascading value.

   serverData = [
    {
      name: "country", 
      type: "select", 
      source: [{ text: "India", value: 1 }, { text: "US", value: 2 }, { text: "Canada", value: 3 }], 
      ui: {
        label: 'Country',
        placeholder: 'select'
      }
    }, 
    {
      name: "state", 
      modelName: 'sourceSync', 
      type: "select", 
      filter: [{ text: "Gujarat", value: 1, countryId: 1 }, { text: "Delhi", value: 2, countryId: 1 }, { text: "NY", value: 3, countryId: 2 }], 
      ui: {
        label: 'State',
        placeholder: 'select'
      }
    }
  ]

Cascading Dropdown Example

Need Help

We highly recommend for help please ask your questions on our gitter/rxweb-project to get quick response from us. Otherthan our gitter channel you can ask your question on StackOverflow or create a new issue in our Github Repository.

For, issue please refer our issue workflow wiki for better visibility our issue process.

Feature Request

You can request a new feature by submitting an issue to our GitHub Repository. If you would like to implement a new feature, please submit an issue with a proposal for your work first, to be sure that we can use it.

License

MIT