@@ -57,6 +57,15 @@ function FormController($scope) {
57
57
}
58
58
```
59
59
60
+
61
+ Contributing
62
+ ------------
63
+
64
+ All contributions are welcome! We're trying to use [ git flow] ( http://danielkummer.github.io/git-flow-cheatsheet/ )
65
+ so please base any merge request on the ** development** branch instead of ** master** .
66
+
67
+
68
+
60
69
Form types
61
70
----------
62
71
Schema Form currently supports the following form field types:
@@ -178,15 +187,40 @@ General options most field types can handle:
178
187
title: " Street" , // Title of field, taken from schema if available
179
188
notitle: false , // Set to true to hide title
180
189
description: " Street name" , // A description, taken from schema if available
181
- validationMessage: " Oh noes, please write a proper address" // A custom validation error message
190
+ validationMessage: " Oh noes, please write a proper address" , // A custom validation error message
191
+ onChange: " valueChanged(form.key,modelValue)" , // onChange event handler, expression or function
192
+ feedback: false // inline feedback icons
182
193
}
183
194
```
184
195
185
- Validation Messages
186
- -------------------
196
+ ### onChange
197
+ The ``` onChange ``` option can be used with most fields and its value should be
198
+ either an angular expression, as a string, or a function. If its an expression
199
+ it will be evaluated in the parent scope of the ``` sf-schema ``` directive with
200
+ the special locals ``` modelValue ``` and ``` form ``` . If its a function that will
201
+ be called with ``` modelValue ``` and ``` form ``` as first and second arguments.
202
+
203
+ ex.
204
+ ``` javascript
205
+ $scope .form = [
206
+ {
207
+ key: " name" ,
208
+ onChange: " updated(modelValue,form)"
209
+ },
210
+ {
211
+ key: " password" ,
212
+ onChange : function (modelValue ,form ) {
213
+ console .log (" Password is" ,modelValue);
214
+ }
215
+ }
216
+ ];
217
+ ```
218
+
219
+ ### Validation Messages
220
+
187
221
Per default all error messages but "Required" comes from the schema validator
188
222
[ tv4] ( https://github.com/geraintluff/tv4 ) , this might or might not work for you.
189
- If you supply a ´´´ validationMessage´´´ proṕerty in the form definition, and if its value is a
223
+ If you supply a ``` validationMessage ``` property in the form definition, and if its value is a
190
224
string that will be used instead on any validation error.
191
225
192
226
If you need more fine grained control you can supply an object instead with keys matching the error
204
238
}
205
239
```
206
240
241
+ ### Inline feedback icons
242
+ * input* and * textarea* based fields get inline status icons by default. A check
243
+ when everything is valid and a cross when there are validation errors.
244
+
245
+ This can be turned off or configured to other icons. To turn off just
246
+ set ``` feedback ``` to false. If set to a string that string is evaluated by
247
+ a ``` ngClass ``` in the decorators scope. If not set att all the default value
248
+ is ``` { 'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() } ```
249
+
250
+ ex. displaying an asterisk on required fields
251
+ ``` javascript
252
+ $sope .form = [
253
+ {
254
+ key: " name" ,
255
+ feedback: " { 'glyphicon': true, 'glyphicon-asterisk': form.requires && !hasSuccess && !hassError() ,'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"
256
+ }
257
+ ```
258
+
259
+ Useful things in the decorators scope are
260
+
261
+ | Name | Description|
262
+ | :---------------| :----------:|
263
+ | hasSuccess() | * true* if field is valid and not pristine |
264
+ | hasError() | * true* if field is invalid and not pristine |
265
+ | ngModel | The controller of the ngModel directive, ex. ngModel.$valid |
266
+ | form | The form definition for this field |
267
+
268
+
207
269
208
270
Specific options per type
209
271
-------------------------
@@ -346,8 +408,23 @@ function FormCtrl($scope) {
346
408
```
347
409
348
410
349
- Contributing
350
- ------------
411
+ Post process function
412
+ ---------------------
351
413
352
- All contributions are welcome! We're trying to use [ git flow] ( http://danielkummer.github.io/git-flow-cheatsheet/ )
353
- so please base any merge request on the ** development** branch instead of ** master** .
414
+ If you like to use ``` ["*"] ``` as a form, or aren't in control of the form definitions
415
+ but really need to change or add something you can register a * post process*
416
+ function with the ``` schemaForm ``` service provider. The post process function
417
+ gets one argument, the final form merged with the defaults from the schema just
418
+ before it's rendered, and should return a form.
419
+
420
+ Ex. Reverse all forms
421
+ ``` javascript
422
+ angular .module (' myModule' ).config (function (schemaFormProvider ){
423
+
424
+ schemaForm .postProcess (function (form ){
425
+ form .reverse ();
426
+ return form;
427
+ })
428
+
429
+ });
430
+ ```
0 commit comments