Angular Dynamic Form Generator

Richard Knight 1ef197f493 Improved? преди 6 години
_notes 1d1b90ec92 Adding metadata generation utilities преди 6 години
e2e 4fe4114fe8 chore: initial commit from @angular/cli преди 6 години
src 3e082bdadc Adding some simple examples преди 6 години
.editorconfig 4fe4114fe8 chore: initial commit from @angular/cli преди 6 години
.gitignore 4fe4114fe8 chore: initial commit from @angular/cli преди 6 години
README.md 1ef197f493 Improved? преди 6 години
angular.json d5ae6eec55 Clarity icons now working преди 6 години
karma.conf.js 1e1f528f58 Upgrade to Angular 6 преди 6 години
ng-dynaform.code-workspace af95f7a4e9 Testing callbacks from deeply nested groups преди 6 години
package-lock.json 9182bf4588 Starting bare-bones documentation in README преди 6 години
package.json 9182bf4588 Starting bare-bones documentation in README преди 6 години
protractor.conf.js 4fe4114fe8 chore: initial commit from @angular/cli преди 6 години
tsconfig.json 1e1f528f58 Upgrade to Angular 6 преди 6 години
tslint.json 1e1f528f58 Upgrade to Angular 6 преди 6 години
yarn.lock 1e1f528f58 Upgrade to Angular 6 преди 6 години

README.md

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