@@ -21,24 +21,30 @@ import {print} from 'angular2/src/facade/lang';
2121 template : `
2222 <div [control-group]="header">
2323 <div>
24- <label>Title:</label> <br/>
25- <input type="text" control="title"/>
24+ <label>
25+ Title: <br>
26+ <input type="text" control="title">
27+ </label>
2628 <div *ng-if="! header.controls.title.valid && header.controls.title.dirty">
2729 Title is required
2830 </div>
2931 </div>
3032
3133 <div>
32- <label>Description:</label> <br/>
33- <textarea control="description"></textarea>
34+ <label>
35+ Description: <br>
36+ <textarea control="description"></textarea>
37+ </label>
3438 <div *ng-if="! header.controls.description.valid && header.controls.description.dirty">
3539 Description is required
3640 </div>
3741 </div>
3842
3943 <div>
40- <label>Publish Date:</label> <br/>
41- <input type="date" control="date"/>
44+ <label>
45+ Publish Date: <br>
46+ <input type="date" control="date">
47+ </label>
4248 </div>
4349 </div>
4450 ` ,
@@ -69,29 +75,35 @@ class HeaderFields {
6975
7076 <div [control-group]="question">
7177 <div>
72- <label>Type:</label> <br/>
73- <select control="type">
74- <option value=""></option>
75- <option value="text">Text</option>
76- <option value="checkbox">Checkbox</option>
77- <option value="textarea">Textarea</option>
78- </select>
78+ <label>
79+ Type: <br>
80+ <select control="type">
81+ <option value=""></option>
82+ <option value="text">Text</option>
83+ <option value="checkbox">Checkbox</option>
84+ <option value="textarea">Textarea</option>
85+ </select>
86+ </label>
7987 <div *ng-if="! question.controls.type.valid && question.controls.type.dirty">
8088 Type is required
8189 </div>
8290 </div>
8391
8492 <div>
85- <label>Question:</label> <br/>
86- <input type="text" control="questionText">
93+ <label>
94+ Question: <br>
95+ <input type="text" control="questionText">
96+ </label>
8797 <div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty">
8898 Question is required
8999 </div>
90100 </div>
91101
92102 <div *ng-if="question.contains('responseLength')">
93- <label>Response Length:</label> <br/>
94- <input type="number" control="responseLength">
103+ <label>
104+ Response Length: <br>
105+ <input type="number" control="responseLength">
106+ </label>
95107 <div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty">
96108 Length is required
97109 </div>
@@ -187,12 +199,11 @@ class SurveyBuilder {
187199
188200 submitForm ( ) : void {
189201 print ( 'Submitting a form' ) ;
190- print ( `" value: ${ this . form . value } ` ) ;
191- print ( ` valid: $ { this.form.valid } ` ) ;
192- print ( ` errors: $ { this.form.errors }` ) ;
202+ print ( ` value: ${ this . form . value } ` ) ;
203+ print ( ` valid: ${ this . form . valid } ` ) ;
204+ print ( ` errors: ${ this . form . errors } ` ) ;
193205 }
194206}
195-
196207export function main ( ) {
197208 bootstrap ( SurveyBuilder ) ;
198209}
0 commit comments