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>
|
||||||
<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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue