mirror of
https://github.com/nasa/openmct.git
synced 2024-12-21 22:17:49 +00:00
[Forms] Add Forms example
Add example showing the use of generated forms, WTD-530.
This commit is contained in:
parent
354327accc
commit
21f809645d
18
example/forms/bundle.json
Normal file
18
example/forms/bundle.json
Normal 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"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
19
example/forms/res/templates/exampleForm.html
Normal file
19
example/forms/res/templates/exampleForm.html
Normal 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>
|
79
example/forms/src/ExampleFormController.js
Normal file
79
example/forms/src/ExampleFormController.js
Normal 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;
|
||||
}
|
||||
);
|
Loading…
Reference in New Issue
Block a user