Angular Dynamic Form Generator

Richard Knight 1ef197f493 Improved?		%!s(int64=6) %!d(string=hai) anos
_notes	1d1b90ec92 Adding metadata generation utilities	%!s(int64=6) %!d(string=hai) anos
e2e	4fe4114fe8 chore: initial commit from @angular/cli	%!s(int64=6) %!d(string=hai) anos
src	3e082bdadc Adding some simple examples	%!s(int64=6) %!d(string=hai) anos
.editorconfig	4fe4114fe8 chore: initial commit from @angular/cli	%!s(int64=6) %!d(string=hai) anos
.gitignore	4fe4114fe8 chore: initial commit from @angular/cli	%!s(int64=6) %!d(string=hai) anos
README.md	1ef197f493 Improved?	%!s(int64=6) %!d(string=hai) anos
angular.json	d5ae6eec55 Clarity icons now working	%!s(int64=6) %!d(string=hai) anos
karma.conf.js	1e1f528f58 Upgrade to Angular 6	%!s(int64=6) %!d(string=hai) anos
ng-dynaform.code-workspace	af95f7a4e9 Testing callbacks from deeply nested groups	%!s(int64=6) %!d(string=hai) anos
package-lock.json	9182bf4588 Starting bare-bones documentation in README	%!s(int64=6) %!d(string=hai) anos
package.json	9182bf4588 Starting bare-bones documentation in README	%!s(int64=6) %!d(string=hai) anos
protractor.conf.js	4fe4114fe8 chore: initial commit from @angular/cli	%!s(int64=6) %!d(string=hai) anos
tsconfig.json	1e1f528f58 Upgrade to Angular 6	%!s(int64=6) %!d(string=hai) anos
tslint.json	1e1f528f58 Upgrade to Angular 6	%!s(int64=6) %!d(string=hai) anos
yarn.lock	1e1f528f58 Upgrade to Angular 6	%!s(int64=6) %!d(string=hai) anos

NgDynaform

A Dynamic Form Builder for Angular.

Field options

Common field metadata

All fields support the following metadata. The missing properties will be 'filled oin' by dynaform's field-specific models, allowing forms to specifiued tersely.

Options metadata (selects, radios, checkbutton groups, etc)

Oprions can be specified as an array of values, an array of [value, label] pairs, or an array of objects with the structure { value: 'VAL', label: 'My label' }. If you supply a a simple array of values, each value is used as both the value and label.

Available types

Text
Textarea
Select
Radio
Checkbox
Checkbutton
Password
Hidden

Example

{
	firstName: {},
	lastName: {},
	telephoneNumber: {},
	country: { type: 'select', options: ['France', 'Germany', 'Italy', 'Norway', 'Spain', 'UK'] }
}

Grouping related controls using containers

Related cpontrols can be grouped in containers.

Seeding groups with shared options

Repeating groups

The built-in model mapper

TO ADD.

Property	Description	Default / Notes
name	The FormControl name - DERIVED AUTOMATICALLY	Derived from the key of the control's metadata object
type	The control's type	Text
label	The controls's label	UnCamelCased and spaced version of name
value	The control's initial value	Empty string
checkedValue	Value when checked*	Checkboxes / Checkbuttons only
default	Default value
placeholder	Optional placeholder text
class	CSS classes to apply	Single class (string) or array of classes (string[])
id	CSS id to apply
disabled	Whether field is disbled
change	Name of function in host component to call when value changes
source	Location of data in model	Same name and path. Used by model-mapper.
before	Ordering instruction - move before
after	Ordering instruction - move after
validators	Array of validator functions - following Angular FormControl API
asyncValidators	Array of async validator functions - following Angular FormControl API
valFailureMessages	Validation failure messages - display appropriate message if validation fails

README.md