Skip to content

Commit bebf208

Browse files
anthonykoerberanthonykoerber
committed
Add a custom form component to validate assumptions
1 parent 32c9623 commit bebf208

2 files changed

Lines changed: 172 additions & 104 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 163 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -48,124 +48,190 @@
4848
}
4949
</style>
5050
</head>
51-
<body>
51+
5252

53-
<dom-module id="special-snowflake">
54-
<style type="text/css">
55-
:host {
56-
position: relative;
57-
display: flex;
58-
align-items: center;
59-
font-size: 0;
60-
}
61-
mm-dropdown {
62-
margin-right: 15px;
63-
}
64-
</style>
65-
<template>
66-
<mm-radio id="standardSize" checked></mm-radio>
67-
<mm-dropdown placeholder="Select One">
68-
<mm-list-item>300x250</mm-list-item>
69-
<mm-list-item>300x250</mm-list-item>
70-
<mm-list-item>300x250</mm-list-item>
53+
<body>
54+
<!-- dom module for testing special cases -->
55+
<dom-module id="special-snowflake">
56+
<style type="text/css">
57+
:host {
58+
position: relative;
59+
display: flex;
60+
align-items: center;
61+
font-size: 0;
62+
}
63+
mm-dropdown {
64+
margin-right: 15px;
65+
}
66+
</style>
67+
<template>
68+
<mm-radio
69+
id="standardSize"
70+
group="sizes"
71+
checked
72+
on-selected="_handleRadioSelected"></mm-radio>
73+
<mm-dropdown
74+
id="standardSizeDdl"
75+
disabled$="{{!isStandard}}"
76+
on-changed="_standardSizeChanged"
77+
placeholder="Select One">
78+
<mm-list-item>160x600</mm-list-item>
79+
<mm-list-item>728x90</mm-list-item>
7180
<mm-list-item>300x250</mm-list-item>
7281
</mm-dropdown>
73-
<mm-radio id="nonStandardSize"></mm-radio>
74-
<mm-group disabled>
75-
<mm-input placeholder="Width" validation="int"></mm-input>
76-
<mm-input placeholder="Height" validation="int"></mm-input>
82+
<mm-radio
83+
id="nonStandardSize"
84+
group="sizes"
85+
on-selected="_handleRadioSelected"></mm-radio>
86+
<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
87+
<mm-input
88+
id="width"
89+
placeholder="Width"
90+
validation="int"
91+
on-changed="_widthChanged"></mm-input>
92+
<mm-input
93+
id="height"
94+
placeholder="Height"
95+
validation="int"
96+
on-changed="_heightChanged"></mm-input>
7797
</mm-group>
78-
</template>
79-
</dom-module>
80-
81-
<mm-form id="testForm" unresolved>
98+
</template>
99+
</dom-module>
100+
101+
<mm-form id="testForm" unresolved>
102+
<!-- row 1 -->
103+
<div class="col" span="1">
104+
<mm-input
105+
fitparent
106+
name="input"
107+
validation="int|empty"
108+
placeholder="Type a Number"
109+
label="Type a Number"
110+
error-message="You need to type a number"></mm-input>
111+
</div>
112+
<div class="col" span="1">
113+
<mm-dropdown
114+
fitparent
115+
name="dropdown"
116+
placeholder="Select an Item"
117+
validation="empty"
118+
label="Select an Item"
119+
error-message="You need to select an item">
120+
<mm-list-item>List Item 1</mm-list-item>
121+
<mm-list-item>List Item 2</mm-list-item>
122+
<mm-list-item>List Item 3</mm-list-item>
123+
<mm-list-item>List Item 4</mm-list-item>
124+
</mm-dropdown>
125+
</div>
126+
<div class="col" span="1">
127+
<mm-group
128+
fitparent
129+
unresolved
130+
name="radio"
131+
placeholder="Select an Item"
132+
validation="empty"
133+
label="Select a Color"
134+
error-message="You need to select a color">
135+
<mm-radio>
136+
<label>Red</label>
137+
</mm-radio>
138+
<mm-radio>
139+
<label>Green</label>
140+
</mm-radio>
141+
<mm-radio>
142+
<label>Blue</label>
143+
</mm-radio>
144+
</mm-group>
145+
</div>
82146

83-
<!-- row 1 -->
84-
<div class="col" span="1">
85-
<mm-input
86-
fitparent
87-
name="input"
88-
validation="int|empty"
89-
placeholder="Type a Number"
90-
label="Type a Number"
91-
error-message="You need to type a number"></mm-input>
92-
</div>
93-
<div class="col" span="1">
94-
<mm-dropdown
95-
fitparent
96-
name="dropdown"
97-
placeholder="Select an Item"
98-
validation="empty"
99-
label="Select an Item"
100-
error-message="You need to select an item">
101-
<mm-list-item>List Item 1</mm-list-item>
102-
<mm-list-item>List Item 2</mm-list-item>
103-
<mm-list-item>List Item 3</mm-list-item>
104-
<mm-list-item>List Item 4</mm-list-item>
105-
</mm-dropdown>
106-
</div>
107-
<div class="col" span="1">
108-
<mm-group
109-
fitparent
147+
<!-- row 2 -->
148+
<div class="col" span="1">
149+
<special-snowflake
110150
unresolved
111-
name="radio"
112-
placeholder="Select an Item"
113-
validation="empty"
114-
label="Select a Color"
115-
error-message="You need to select a color">
116-
<mm-radio>
117-
<label>Red</label>
118-
</mm-radio>
119-
<mm-radio>
120-
<label>Green</label>
121-
</mm-radio>
122-
<mm-radio>
123-
<label>Blue</label>
124-
</mm-radio>
125-
</mm-group>
126-
</div>
127-
128-
<!-- row 2 -->
129-
<div class="col" span="1">
130-
<special-snowflake
131-
unresolved
132-
name="snowflake"
133-
validation="dimension"
134-
label="Select a Dimension"
135-
error-message="You need to select a dimension"></special-snowflake>
136-
137-
</mm-form>
138-
139-
<script>
140-
141-
HTMLImports.whenReady(function() {
142-
Polymer({
151+
name="snowflake"
152+
validation="dimensions|empty"
153+
label="Select a Dimension"
154+
error-message="You need to select a dimension"></special-snowflake>
155+
</mm-form>
156+
157+
<script>
158+
// special form component to validate assumptions:
159+
HTMLImports.whenReady(function() {
160+
Polymer({
143161
is: "special-snowflake",
144-
162+
behaviors: [
163+
StrandTraits.Resolvable
164+
],
145165
properties: {
146166
value: {
147-
type:String,
167+
type: Object,
148168
notify: true,
169+
value: function() {
170+
return {
171+
width: null,
172+
height: null
173+
}
174+
},
149175
observer: "_valueChanged"
150176
},
177+
isStandard: {
178+
type: Boolean
179+
}
151180
},
152-
153181
_valueChanged: function(oldVal, newVal) {
154182
// must fire a changed event:
155183
this.fire('changed', { value: newVal });
184+
},
185+
_handleRadioSelected: function(e) {
186+
switch (e.detail.item.id) {
187+
case 'standardSize':
188+
this.isStandard = true;
189+
break;
190+
case 'nonStandardSize':
191+
this.isStandard = false;
192+
break;
193+
default:
194+
return;
195+
}
196+
},
197+
_standardSizeChanged: function(e) {
198+
// split the dimension and shove into the value Object
199+
var dimensions = e.detail.value.split('x');
200+
this.value = {
201+
width : parseInt(dimensions[0]),
202+
height : parseInt(dimensions[1])
203+
};
204+
},
205+
_widthChanged: function(e) {
206+
if (e.detail.value) {
207+
this.value.width = parseInt(e.detail.value);
208+
}
209+
},
210+
_heightChanged: function(e) {
211+
if (e.detail.value) {
212+
this.value.height = parseInt(e.detail.value);
213+
}
156214
}
157-
215+
});
158216
});
159-
});
160217

161-
window.addEventListener('WebComponentsReady', function(e) {
162-
var testForm = document.querySelector('#testForm');
163-
testForm.addEventListener('serialize-form', function(e){
164-
console.log('serialize-form', e.detail);
218+
window.addEventListener('WebComponentsReady', function(e) {
219+
var testForm = document.querySelector('#testForm');
220+
221+
// add custom validation rules for the dimension component
222+
// this would probably be more robust, but this is sufficient
223+
testForm.rules.dimensions = function(i) {
224+
var isValid = typeof(i.width === 'number') &&
225+
typeof(i.height === 'number');
226+
return i.width !== null && i.height !== null;
227+
}
228+
229+
testForm.addEventListener('serialize-form', function(e){
230+
console.log('serialize-form', e.detail);
231+
});
165232
});
166-
});
167233

168-
</script>
234+
</script>
169235

170236
</body>
171237
</html>

‎src/mm-form/mm-form.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -204,14 +204,16 @@
204204
var field = e.target,
205205
value = e.detail.value;
206206

207-
this._dataUpdate(field, value);
207+
if (value) {
208+
this._dataUpdate(field, value);
208209

209-
var diff = this._diffData();
210+
var diff = this._diffData();
210211

211-
if (diff) {
212-
this.footerMessage = this.footerMessages.warning;
213-
this.footerType = 'warning';
214-
this._showFooterMessage = true;
212+
if (diff) {
213+
this.footerMessage = this.footerMessages.warning;
214+
this.footerType = 'warning';
215+
this._showFooterMessage = true;
216+
}
215217
}
216218
},
217219

@@ -308,7 +310,7 @@
308310
}
309311
}
310312

311-
// fire an invalid form event:
313+
// fire a serialize-form event:
312314
this.fire('serialize-form', {
313315
isValid: !invalid.length > 0,
314316
invalidFields: invalid,

0 commit comments

Comments
 (0)