[Forms] Add composite control type

Add a type for composite controls, to allow populating
arrays (e.g. preferred size). WTD-593.
This commit is contained in:
Victor Woeltjen
2014-12-03 15:08:41 -08:00
parent 3d95c8b744
commit 363a6f6b47
4 changed files with 58 additions and 50 deletions

View File

@@ -13,43 +13,47 @@
"model": { "composition": [] },
"properties": [
{
"label": "Preferred Size",
"control": "_textfields",
"values": [
"name": "Preferred Size",
"control": "composite",
"items": [
{
"label": "Width (px)",
"name": "Width (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$"
},
{
"label": "Height (px)",
"name": "Height (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$"
}
],
"key": "preferredSize",
"property": "preferredSize",
"conversion": "number[]"
},
{
"label": "Layout Grid",
"control": "_textfields",
"values": [
"name": "Layout Grid",
"control": "composite",
"items": [
{
"label": "Horizontal grid (px)",
"name": "Horizontal grid (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$"
},
{
"label": "Vertical grid (px)",
"name": "Vertical grid (px)",
"control": "textfield",
"pattern": "^(\\d*[1-9]\\d*)?$"
}
],
"key": "layoutGrid",
"property": "layoutGrid",
"conversion": "number[]"
},
{
"label": "Default View",
"control": "_select",
"values": [
"Plot",
"Scrolling"
"name": "Default View",
"control": "select",
"options": [
{ "name": "Plot", "value": "plot" },
{ "name": "Scrolling", "value": "scrolling" }
],
"comment": "TODO: Infer values from type",
"key": "defaultView"

View File

@@ -29,6 +29,10 @@
{
"key": "textfield",
"templateUrl": "templates/controls/textfield.html"
},
{
"key": "composite",
"templateUrl": "templates/controls/composite.html"
}
],
"controllers": [

View File

@@ -0,0 +1,13 @@
<ng-form name="mctFormItem" ng-repeat="item in structure.items">
<mct-control key="item.control"
ng-model="ngModel[field]"
ng-required="item.required"
ng-pattern="ngPattern"
options="item.options"
structure="row"
field="$index">
</mct-control>
<span class="composite-control-label">
{{item.name}}
</span>
</ng-form>

View File

@@ -32,19 +32,6 @@
field="row.key">
</mct-control>
</div>
<div ng-repeat="item in row.items" class="validates">
<ng-form name="mctFormItem">
<mct-control key="item.control"
ng-model="ngModel"
ng-required="item.required"
ng-pattern="getRegExp(item.pattern)"
options="item.options"
structure="row"
field="item.key">
</mct-control>
{{item.name}}
</ng-form>
</div>
</div>
</div>
</ng-form>