rxweb
Build Model Driven Dynamic Form Approach in Angular Reactive Form.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',
}
}]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