@labshare/ngx-forms

ngx-forms

Dynamic form generator, creates Angular Reactive forms from json schema

Installation

npm i --save @labshare/ngx-forms

Usage

Add html tag with bindings

<dynamic-form [formConfig]="config" #form="dynamicForm" [model]="data"></dynamic-form>

• config - json array that contains fields definitions
• #form="dynamicForm" - bind to dynamicForm object that has form output
• model - preload data. One way binding only

Add reference in the component controller

export class MyFormComponent {
    @ViewChild('form') public formReference: DynamicFormDirective;

    public const config = [ 
        { type: 'text', label: 'Title', name: 'title' } 
    ];
 
    public const model = { title: "Example" }
    
}

Config example

[
    { type: 'hidden', name: 'id' },
    { type: 'text', label: 'Title', name: 'title', placeholder: 'Enter project title', required: true, max: 14 },
    { type: 'text', label: 'Name', name: 'activityName', placeholder: 'Enter project name', minLength: 2, maxLength: 5 },
]

Field options and examples

Name	Type	Description	Example
disabled?	boolean	disable field if true	disabled: true
label?	string	field label	label: "Project Title"
name	string	field name	name: "projectTitle"
options?	string[]	options for <select> dropdown	options: [ "Option 1", "Option 2" ]
placeholder?	string	text placeholder	placeholder: "Enter Project Title"
type	string	field type (see field type description)	type: "select"
value?	any	field value	value: 123
required?	boolean	Validation: required or not	required: true
minLength?	number	Validation: minimum length of a text field	minLength: 5
maxLength?	number	Validation: maximum length of a text field	maxLength: 12
email?	boolean	Validation: field must be an email address	email: true
min?	number	Validation: minumum value for number fields	min: 100
max?	number	Validation: maximum value for number fields	max: 1000
pattern?	RegExp	Validation: regular expression	pattern: "^[a-zA-Z0-9_]*$"
nullValidator?	any	Validation: null validation	nullValidator: true
hidden	boolean	hide the field by default when the form loading	hidden: true

Field types:

• text - text input <input type="text">
• select - text unput <select>
• textarea - text input <textarea>
• editor - Rich text editor based on ngx-quill
• hidden - hidden value field <input type="hidden">.
• radio - radio buttons
• checkbox - checkbox buttons
• date - datepicker

Linking for Development

npm run link
npm run build:watch