[Forms] Add Forms example

Add example showing the use of generated forms, WTD-530.
This commit is contained in:
Victor Woeltjen 2014-11-28 14:12:20 -08:00
parent 354327accc
commit 21f809645d
3 changed files with 116 additions and 0 deletions

18
example/forms/bundle.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "Declarative Forms example",
"sources": "src",
"extensions": {
"controllers": [
{
"key": "ExampleFormController",
"implementation": "ExampleFormController.js",
"depends": [ "$scope" ]
}
],
"routes": [
{
"templateUrl": "templates/exampleForm.html"
}
]
}
}

View File

@ -0,0 +1,19 @@
<div ng-controller="ExampleFormController">
<mct-form structure="form" ng-model="state" name="aForm">
</mct-form>
<ul>
<li>Dirty: {{aForm.$dirty}}</li>
<li>Valid: {{aForm.$valid}}</li>
</ul>
<pre>
<textarea>
{{state | json}}
</textarea>
</pre>
</div>

View File

@ -0,0 +1,79 @@
/*global define*/
define(
[],
function () {
"use strict";
function ExampleFormController($scope) {
$scope.state = {
};
$scope.form = {
name: "An example form.",
sections: [
{
name: "First section",
rows: [
{
name: "Check me",
control: "checkbox",
key: "checkMe"
},
{
name: "Enter your name",
required: true,
control: "textfield",
key: "yourName"
},
{
name: "Enter a number",
control: "textfield",
pattern: "^\\d+$",
key: "aNumber"
}
]
},
{
name: "Second section",
rows: [
{
name: "Pick a date",
required: true,
description: "Enter date in form YYYY-DDD",
control: "datetime",
key: "aDate"
},
{
name: "Choose something",
control: "select",
options: [
{ name: "Hats", value: "hats" },
{ name: "Bats", value: "bats" },
{ name: "Cats", value: "cats" },
{ name: "Mats", value: "mats" }
],
key: "aChoice"
},
{
name: "Choose something",
control: "select",
required: true,
options: [
{ name: "Hats", value: "hats" },
{ name: "Bats", value: "bats" },
{ name: "Cats", value: "cats" },
{ name: "Mats", value: "mats" }
],
key: "aRequiredChoice"
}
]
}
]
};
}
return ExampleFormController;
}
);