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:
gdi2290 2015-05-26 21:59:09 -07:00 committed by Victor Berchet
parent b390f441a1
commit c19c69f336
1 changed files with 32 additions and 21 deletions

View File

@ -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>
<textarea control="description"></textarea> Description: <br>
<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>
<select control="type"> Type: <br>
<option value=""></option> <select control="type">
<option value="text">Text</option> <option value=""></option>
<option value="checkbox">Checkbox</option> <option value="text">Text</option>
<option value="textarea">Textarea</option> <option value="checkbox">Checkbox</option>
</select> <option value="textarea">Textarea</option>
</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>
<input type="text" control="questionText"> Question: <br>
<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>
<input type="number" control="responseLength"> Response Length: <br>
<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);
} }