digitalbazaar/bedrock-angular-form

Name: bedrock-angular-form

Owner: Digital Bazaar, Inc.

Description: Bedrock AngularJS Form support

Created: 2015-01-20 23:19:01.0

Updated: 2017-09-09 01:38:19.0

Pushed: 2018-01-15 00:24:44.0

Homepage: null

Size: 279

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

bedrock-angular-form

A bedrock AngularJS module that provides services and directives for creating and handling forms. A form can also be dynamically created with a JSON based layout model.

Uses features from bedrock-angular-alert and bedrock-angular-resource.

Quick Examples

 ng-controller="TestController as model">
orm class="well form-horizontal" role="form">
<fieldset>
  <br-input br-model="model.name" 
    br-options="{icon: 'tag', name: 'name', label: 'Name'}">
    Please enter your name.
  </br-input>
</fieldset>
form>
v>

s
.. TODO ...

Setup

r install bedrock-angular-form

Installation of the module followed by a restart of your bedrock server is sufficient to make the module available to your application.

To manually add bedrock-angular-form as a dependency:

lar.module('myapp', ['bedrock.form']);

API

br-datepicker

Show a date picker form component.

datepicker
-model="model.date"
-options="{
format: 'yyyy/MM/dd',
time: (24*60*60*1000 - 1),
columns: {
  input: '...'
}
></br-datepicker>

br-form

Display a form UI for a data model based on a layout. The top level layout is split into groups built with br-form-group. Each group is composed of many fields built with br-form-field.

form
-model="model.data"
-groups="model.layout"
-options="{
editable: false
></br-form>

See brFormLibraryService for how to create the br-groups data.

br-form-field

Used by br-form-group to display a field.

TODO

br-form-group

Used by br-form to display a group of fields.

TODO

br-form-static

Show a properly styled static form field.

form-static
-options="{
inline: true,
name: 'staticInfo',
label: 'Static Info'
>
r-form-static-content>Static content.</br-form-static-content>
r-form-static-help>Help details about static content.</br-form-static-help>
-form-static>

br-help-toggle

Helper to toggle help text. Used with br-track-state.

m class="well form-vertical">
ieldset>
<div class="form-group" br-property-path="label">
  <label for="name">Name</label>
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-tag"></i></span>
    <input class="form-control" type="text" name="label"
      ng-model="model.identityLabel"
      br-track-state="model.help.identityLabel" />
    <span class="input-group-btn">
      <button class="btn btn-default"
        br-help-toggle="model.help.identityLabel">
        <i class="fa fa-question-circle"></i>
      </button>
    </span>
  </div>
  <p ng-show="model.help.identityLabel.show"
    class="help-block br-fadein br-fadeout">
    Enter your identity name.
  </p>
</div>
fieldset>
rm>

br-input

Show an input field form component.

input
-model="model.label"
-options="{
icon: 'tag',
name: 'label',
label: 'Name',
placeholder: 'Name'
>
ease enter a name.
-input>

br-input-watcher

Rate limited input watcher.

n br-input-watcher="model.search.input"
-input-watcher-state="model.search.state"
-input-change="search(input, state, callback)">
an>

br-radio-group

Show a radio group form component.

radio-group
-model="model.favoriteColor"
-group="[
{label: 'Red', value: 'red'},
{label: 'Blue', value: 'blue'},
{label: 'Other', value: 'other'}

-options="{
inline: true,
name: 'favoriteColor',
label: 'Favorite Color'
>
ease select your favorite color.
-radio-group>

br-select

Show a select form component.

TODO: Note about br-display-item,

select
-model="model.type"
-items="model.types"
-display-item="item.label"
-options="{
name: 'label',
label: 'Type',
key: 'id'
></br-select>

br-textarea

Show a textarea form component.

textarea
-model="model.comment"
-options="{
icon: 'comment',
name: 'comment',
label: 'Comment',
placeholder: 'Comment',
rows: '3'
>
ease enter a comment.
-textarea>

br-track-state

See br-help-toggle.

brFormLibraryService

brFormLibraryService provides helpers to manage vocabs that can be used to create form layout data.

• brFormLibraryService.create(): Create a new brFormLibraryService.Library
• Library.vocabs: Map of all loaded vocabs indexed by id.
• Library.hasVocabs: Flag set if vocabs exist.
• Library.properties: Map of all loaded properties indexed by id.
• Library.groups: Map of all loaded groups indexed by id.
• Library.hasGroups: Flag set if groups exist.
• Library.graph: Flattened graph of all properties and groups.
• Library.load(id): Load a vocab URI, expand and compact the data with a custom context, reframe in @link mode, then find all properties and property groups.

One way to use this is to have static context and vocab files on your site and use Library.load() to load the vocab.

Layout Format

The form layout is created using JSON-LD. There are a number of custom and common properties used in a vocab document to define properties and how they are combined into form groups.

Properties have some common properties and the rdfs:range as a type. Forms use the property types to know what type of field to display.

Propety groups have labels and comments used for display as well as a ordered list of properties to display with options.

An example context https://example.com/contexts/example-v1.jsonld:

context": {
"id": "@id",
"type": "@type",
"dc": "http://purl.org/dc/terms/",
"dc11": "http://purl.org/dc/elements/1.1/",
"dcterms": "http://purl.org/dc/terms/",
"owl": "http://www.w3.org/2002/07/owl#",
"rdf": "http://www.w3.org/1999/02/22-rdf-syntax-ns#",
"rdfs": "http://www.w3.org/2000/01/rdf-schema#",
"schema": "http://schema.org/",
"xsd": "http://www.w3.org/2001/XMLSchema#",
...

"owl:sameAs": {"@type": "@id"},

"br": "urn:bedrock:",

"layout": {"@id": "br:layout", "@type": "@id", "@container": "@list"},
"property": {"@id": "br:property", "@type": "@id"},
"propertyGroup": {"@id": "br:propertyGroup", "@type": "@id"},
"optional": {"@id": "br:optional", "@type": "@xsd:boolean"},
"resource": {"@id": "br:resource", "@type": "@id"},
"date": {"@id": "br:date", "@type": "xsd:dateTime"},
"domain": {"@id": "rdfs:domain",  "@type": "@vocab"},
"range": {"@id": "rdfs:range", "@type": "@vocab"},
"rangeOption": {
  "@id": "br:rangeOption",
  "@container": "@list"
},
"rangeOptionCompareProperty": {
  "@id": "br:rangeOptionCompareProperty",
  "@type": "@vocab"
},
"comment": "rdfs:comment",
"label": "rdfs:label",
"value": "rdf:value",
"Property": "rdf:Property",
"PropertyGroup": "br:PropertyGroup",
"URL": "rdfs:Resource",
"String": "rdfs:Literal",
"Date": "xsd:dateTime",

"ex": "https://example.com/schema/",
"testId": "ex:testId",
"testDate": {"@id" : "ex:testDate", "@type": "xsd:dateTime"},
...

An example vocab https://example.com/vocabs/example-v1.jsonld:

context": "../contexts/example-v1.jsonld",
d": "https://example.com/vocabs/example-v1",
abel": "Example Vocabulary",
graph": [
{
  "id": "https://example.com/schema/testId",
  "type": "Property",
  "label": "Test ID",
  "comment": "A test identifier.",
  "domain": "schema:Thing",
  "range": "String"
},
{
  "id": "https://example.com/schema/testDate",
  "type": "Property",
  "label": "Test Date",
  "comment": "A test date.",
  "domain": "schema:Thing",
  "range": "Date"
},
...
{
  "id": "https://example.com/schema/examplePropertyGroup",
  "type": "PropertyGroup",
  "label": "Example Group",
  "comment": "The custom properties for an example layout group.",
  "layout": [
    {
      "property": "https://example.com/schema/testId"
    },
    {
      "property": "https://example.com/schema/testDate"
    }
  ]
}
...

Constants

• monthNames: Names of months: ['January', 'February', ..., 'December']
• monthNumbers: Numbers of months: ['01', '02', ..., '12']
• monthLabels: Month labels suitable for a br-select: [{index: 1, label: '01 - January', ...]
• years: Next 10 years suitable for expiration use: [2015, 2016, ..., 2024]
• countries: Countries in sorted display order: [..., {code: 'XY', name: 'Xxx Yyy'}, ...]