ソースを参照

Adding some simple examples

Richard Knight 6 年 前
コミット
3e082bdadc
共有2 個のファイルを変更した39 個の追加17 個の削除を含む
  1. 35 13
      README.md
  2. 4 4
      src/app/dynaform/models/field.model.ts

+ 35 - 13
README.md

@@ -1,17 +1,19 @@
 # NgDynaform
 
-Beakout project to develop Dynamic Form Builder module.
+A Dynamic Form Builder for Angular.
 
-## General options for each control ##
+## General options for each control
 
-### Common field metadata properties ###
+### Common field metadata properties
+
+All fields support the following metadata. The missing properties will be 'filled oin' by dynaform's field-specific models, allowing forms to specifiued tersely.
 
 | Property           	| Description                                                                   	| Default / Notes                                      	|
 |--------------------	|-------------------------------------------------------------------------------	|------------------------------------------------------	|
-| name               	| The FormControl name                                                          	| OBLIGATORY                                           	|
+| name               	| The FormControl name                                                          	| Derived from the key of the control's metadata object |
 | type               	| The control type                                                              	| Text                                                 	|
 | label              	| The controls's label                                                          	| UnCamelCased and spaced version of name              	|
-| value              	| The control's initial value                                                                              	| Empty string                                         	|
+| value              	| The control's initial value                                                                              	| Empty string                  |
 | checkedValue       	| Value when checked*                                                           	| Checkboxes / Checkbuttons only                       	|
 | default            	| Default value                                                                 	|                                                      	|
 | placeholder        	| Optional placeholder text                                                     	|                                                      	|
@@ -25,21 +27,41 @@ Beakout project to develop Dynamic Form Builder module.
 | 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 	|                                                      	|
-|                    	|                                                                               	|                                                      	|
 
-### Options metadata (selects, radios, checkbutton groups, etc) ###
+```
+{
+	firstName: {},
+	lastName: {},
+	telephoneNumber: {}
+}
+```
+
+### Options metadata (selects, radios, checkbutton groups, etc)
+
+Supply an array of values, an array of [calue, label] pairs, or an array of { value: <VALUE>, label: <LABEL> } objects. If you supply a aimple array of values, each value is used as both the value and label.
+
+```
+{
+	firstName: {},
+	lastName: {},
+	telephoneNumber: {},
+	country: { type: 'select', options: ['France', 'Germany', 'Italy', 'Norway', 'Spain', 'UK'] }
+}
+```
 
-Supply an array of values, an array of [key, label] pairs, or an array of { label: <LABEL>, value: <VALUE> } objects. If you supply an array of values, each value is used as both the options value and label.
 
-## Grouping related controls using containers ##
+## Grouping related controls using containers
 
-Blah, de blah blat. TO ADD.
+Related cpontrols can be grouped in containers.
 
-### Seeding groups with shared options ###
+### Seeding groups with shared options
 
-### Repeating groups ###
+### Repeating groups
 
-## The built-in model mapper ##
+## The built-in model mapper
 
 TO ADD.
 
+
+
+

+ 4 - 4
src/app/dynaform/models/field.model.ts

@@ -11,8 +11,7 @@ import { standardModifiers, standardTransformer } from './../utils';
 
 interface ISimpleFieldMetaData {
 	name: string; 							// The FormControl name
-	source?: string;						// Location in API-returned model - defaults to name
-	type?: string; 							// The component type e.g. BasicInput, Checkbutton, Timepicker, etc
+	type?: string; 							// The component type e.g. Text, Checkbutton, Timepicker, etc
 	label?: string;							// The field label - defaults to unCamelCased name if not supplied
 	value?: any;							// The field value - defaults to empty string if not supplied
 	checkedValue?: boolean|number|string;	// Checkboxes and Checkbuttons only
@@ -20,10 +19,11 @@ interface ISimpleFieldMetaData {
 	placeholder?: string;					// Optional placeholder text
 	class?: string | string[];				// CSS classes to apply
 	id?: string;							// CSS id to apply
-	before?: string;						// Ordering instruction - move before <name of another key in group>
-	after?: string;							// Ordering instruction - move after <name of another key in group>
 	disabled?: boolean;						// Whether field is initially disabled
 	change?: string;						// Name of function in host component to call when value changes
+	source?: string;						// Location in API-returned model - defaults to name
+	before?: string;						// Ordering instruction - move before <name of another key in group>
+	after?: string;							// Ordering instruction - move after <name of another key in group>
 	validators?: ValidatorFn[];				// Array of validator functions - following Angular FormControl API
 	asyncValidators?: AsyncValidatorFn[];	// Array of async validator functions - following Angular FormControl API
 	valFailureMsgs?: StringMap<any>;		// Validation failure messages - display appropriate message if validation fails