refactor(forms): remove self closing wrap <label>s
html5 doesn't have self closing tags breaks `stringifyElement` from https://github.com/angular/angular/pull/2106 also an error with submit form and wrap with <label>s
This commit is contained in:
		
							parent
							
								
									b390f441a1
								
							
						
					
					
						commit
						c19c69f336
					
				| @ -21,24 +21,30 @@ import {print} from 'angular2/src/facade/lang'; | |||||||
|   template: ` |   template: ` | ||||||
|       <div [control-group]="header"> |       <div [control-group]="header"> | ||||||
|         <div> |         <div> | ||||||
|           <label>Title:</label> <br/> |           <label> | ||||||
|           <input type="text" control="title"/> |             Title: <br> | ||||||
|  |             <input type="text" control="title"> | ||||||
|  |           </label> | ||||||
|           <div *ng-if="! header.controls.title.valid && header.controls.title.dirty"> |           <div *ng-if="! header.controls.title.valid && header.controls.title.dirty"> | ||||||
|             Title is required |             Title is required | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div> |         <div> | ||||||
|           <label>Description:</label> <br/> |           <label> | ||||||
|  |             Description: <br> | ||||||
|             <textarea control="description"></textarea> |             <textarea control="description"></textarea> | ||||||
|  |           </label> | ||||||
|           <div *ng-if="! header.controls.description.valid && header.controls.description.dirty"> |           <div *ng-if="! header.controls.description.valid && header.controls.description.dirty"> | ||||||
|             Description is required |             Description is required | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div> |         <div> | ||||||
|           <label>Publish Date:</label> <br/> |           <label> | ||||||
|           <input type="date" control="date"/> |             Publish Date: <br> | ||||||
|  |             <input type="date" control="date"> | ||||||
|  |           </label> | ||||||
|         </div> |         </div> | ||||||
|       </div> |       </div> | ||||||
|   `,
 |   `,
 | ||||||
| @ -69,29 +75,35 @@ class HeaderFields { | |||||||
| 
 | 
 | ||||||
|       <div [control-group]="question"> |       <div [control-group]="question"> | ||||||
|         <div> |         <div> | ||||||
|           <label>Type:</label> <br/> |           <label> | ||||||
|  |             Type: <br> | ||||||
|             <select control="type"> |             <select control="type"> | ||||||
|               <option value=""></option> |               <option value=""></option> | ||||||
|               <option value="text">Text</option> |               <option value="text">Text</option> | ||||||
|               <option value="checkbox">Checkbox</option> |               <option value="checkbox">Checkbox</option> | ||||||
|               <option value="textarea">Textarea</option> |               <option value="textarea">Textarea</option> | ||||||
|             </select> |             </select> | ||||||
|  |           </label> | ||||||
|           <div *ng-if="! question.controls.type.valid && question.controls.type.dirty"> |           <div *ng-if="! question.controls.type.valid && question.controls.type.dirty"> | ||||||
|             Type is required |             Type is required | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div> |         <div> | ||||||
|           <label>Question:</label> <br/> |           <label> | ||||||
|  |             Question: <br> | ||||||
|             <input type="text" control="questionText"> |             <input type="text" control="questionText"> | ||||||
|  |           </label> | ||||||
|           <div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty"> |           <div *ng-if="! question.controls.questionText.valid && question.controls.questionText.dirty"> | ||||||
|             Question is required |             Question is required | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
| 
 | 
 | ||||||
|         <div *ng-if="question.contains('responseLength')"> |         <div *ng-if="question.contains('responseLength')"> | ||||||
|           <label>Response Length:</label> <br/> |           <label> | ||||||
|  |             Response Length: <br> | ||||||
|             <input type="number" control="responseLength"> |             <input type="number" control="responseLength"> | ||||||
|  |           </label> | ||||||
|           <div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty"> |           <div *ng-if="! question.controls.responseLength.valid && question.controls.responseLength.dirty"> | ||||||
|             Length is required |             Length is required | ||||||
|           </div> |           </div> | ||||||
| @ -187,12 +199,11 @@ class SurveyBuilder { | |||||||
| 
 | 
 | ||||||
|   submitForm(): void { |   submitForm(): void { | ||||||
|     print('Submitting a form'); |     print('Submitting a form'); | ||||||
|     print(`"value: ${this.form.value}`); |     print(` value: ${ this.form.value }`); | ||||||
|     print(` valid: $ { this.form.valid } `); |     print(` valid: ${ this.form.valid }`); | ||||||
|     print(` errors: $ { this.form.errors }`); |     print(` errors: ${ this.form.errors }`); | ||||||
|   } |   } | ||||||
| } | } | ||||||
| 
 |  | ||||||
| export function main() { | export function main() { | ||||||
|   bootstrap(SurveyBuilder); |   bootstrap(SurveyBuilder); | ||||||
| } | } | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user