Skip to content

Commit 164ce09

Browse files
committed
Docs update
Added custom validation chapter for validation suing custom functions or injecting error messages into fields.
1 parent 236a836 commit 164ce09

File tree

2 files changed

+157
-2
lines changed

2 files changed

+157
-2
lines changed

README.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Generate forms from JSON schemas using AngularJS!
1010

1111
Web Page
1212
--------
13-
[http://textalk.github.io/angular-schema-form/](http://textalk.github.io/angular-schema-form/)
13+
[schemaform.io](http://schemaform.io)
1414

1515
Demo Time!
1616
----------
@@ -41,7 +41,10 @@ apart from JSON Form?
4141

4242
Documentation
4343
-------------
44-
There is one section of documentation covering [defaults and form types](docs/index.md). There is another section for how you [extend angular schema form with your own types](https://github.com/Textalk/angular-schema-form/blob/master/docs/extending.md).
44+
You can find [all documentation here](docs/index.md), it covers all the different field types
45+
and their options.
46+
47+
It also covers how to [extend angular schema form with your own field types](https://github.com/Textalk/angular-schema-form/blob/master/docs/extending.md).
4548

4649
Basic Usage
4750
-----------

docs/index.md

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ Documentation
66
1. [Updating Form](#updating-form)
77
1. [Global Options](#global-options)
88
1. [Validation Messages](#validation-messages)
9+
1. [Custom Validation](#custom-validation)
10+
1. [Inject errors into form, aka backend validation](#inject-errors-into-form-aka-backend validation)
11+
1. [Using ngModelController](#using-ngmodelcontroller)
12+
1. [$validators](#$validators)
13+
1. [$asyncVaidators](#$asyncValidators)
914
1. [Form defaults in schema](#form-defaults-in-schema)
1015
1. [Form types](#form-types)
1116
1. [Default form types](#default-form-types)
@@ -306,6 +311,153 @@ var form = [
306311
```
307312
308313
314+
Custom Validations
315+
------------------
316+
Sometimes the validation you want is tricky to express in a JSON Schema
317+
or Schema Form does not support it (yet), like `anyOf` and `oneOf`.
318+
319+
Other times you really need to ask the backend, maybe to check that the a username is not already
320+
taken or some other constraint that only the backend can know about.
321+
322+
### Inject errors into form aka backend validation
323+
To support validation outside of the form, most commonly on the backend, schema form lets you
324+
injecting arbitrary validationMessages to any field and setting it's validity.
325+
326+
This is done via an event that starts with `schemaForm.error.` and ends with the key to the field.
327+
It also takes two arguments, the first being the error code, the second being either a
328+
validation message or a boolean that sets validity, specifying a validation message automatically
329+
sets the field to invalid.
330+
331+
So lets do an example, say you have a form with a text field `name`:
332+
333+
Schema
334+
```json
335+
{
336+
"type": "object",
337+
"properties": {
338+
"name": { "type": "string" }
339+
}
340+
}
341+
```
342+
343+
Form
344+
```json
345+
[
346+
"name"
347+
]
348+
```
349+
350+
To inject an error message and set that forms validity via [ngModelController.$setValidity](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
351+
broadcast an event with the name `schemaForm.error.name` with name/code for the error and an
352+
optional validation message.
353+
354+
```js
355+
scope.$broadcast('schemaForm.error.name','usernameAlreadyTaken','The username is already taken');
356+
```
357+
This will invalidate the field and therefore the form and show the error message where it normally
358+
pops up, under the field for instance.
359+
360+
There is a catch though, schema form can't now when this field is valid s you have to tell it by
361+
sending an event again, this time switch out the validation message for validity of the field,
362+
i.e. `true`.
363+
364+
```js
365+
scope.$broadcast('schemaForm.error.name','usernameAlreadyTaken',true);
366+
```
367+
368+
You can also pre-populate the validation messages if you don't want to send them in the event.
369+
370+
Form
371+
```json
372+
[
373+
{
374+
"key": "name",
375+
"validationMessages": {
376+
"userNameAlreadyTaken"
377+
}
378+
}
379+
]
380+
```
381+
382+
```js
383+
scope.$broadcast('schemaForm.error.name','usernameAlreadyTaken',false);
384+
```
385+
386+
387+
You can even trigger standard tv4 error messages, just prefix the error code with `tv4-`
388+
```js
389+
// Shows the "Required" error message
390+
scope.$broadcast('schemaForm.error.name','tv4-302',false);
391+
```
392+
393+
394+
### Using ngModelController
395+
Another way to validate your fields is to use Angulars built in support for validator functions
396+
and async validators via the [ngModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
397+
398+
Schema Form can expose the `ngModelController` on a field for a function supplied with the form
399+
definition. Or you can use a shorthand by adding `$validators` and `$asyncValidators` objects as
400+
well as `$viewChangeListener`, `$parsers` and `$formatters` arrays to your form object and they
401+
will be picked up.
402+
403+
Note that `$validators` and `$asyncValidators` are Angular 1.3+ only.
404+
405+
See Angular docs for details and there is also an example you can look at here
406+
[examples/custom-validators.html](../examples/custom-validators.html)
407+
408+
#### $validators
409+
Custom validator functions are added to the `$validators` object and their attribute name is the
410+
error code, so to specify a error message you also need to use.
411+
412+
```js
413+
[
414+
{
415+
key: 'name',
416+
validationMessages: {
417+
'noBob': 'Bob is not OK! You here me?'
418+
},
419+
$validators: {
420+
noBob: function(value) {
421+
if (angular.isString(value) && value.indexOf('Bob') !== -1) {
422+
return false;
423+
}
424+
return true
425+
}
426+
}
427+
}
428+
]
429+
```
430+
431+
432+
#### $asyncValidators
433+
Async validators are basically the same as their synchronous counterparts, but instead you return
434+
a promise that resolves or rejects.
435+
436+
```js
437+
[
438+
{
439+
key: 'name',
440+
validationMessages: {
441+
'noBob': 'Bob is not OK! You here me?'
442+
},
443+
$asyncValidators: {
444+
noBob: function(value) {
445+
var deferred = $q.defer();
446+
$timeout(function(){
447+
if (angular.isString(value) && value.indexOf('bob') !== -1) {
448+
deferred.reject();
449+
} else {
450+
deferred.resolve();
451+
}
452+
}, 500);
453+
return deferred.promise;
454+
}
455+
}
456+
}
457+
]
458+
```
459+
460+
309461
Form defaults in schema
310462
-----------------------
311463
Its recommended to split presentation and validation into a form definition and a json schema. But

0 commit comments

Comments
 (0)