From c564475251a16c44b17e48bf4b64e1b4523b43ff Mon Sep 17 00:00:00 2001 From: vsavkin Date: Fri, 5 Jun 2015 15:37:20 -0700 Subject: [PATCH] example(forms): removed old forms example --- .../template_driven_form_directive.ts | 6 +- modules/examples/src/forms/index.html | 11 - modules/examples/src/forms/index.ts | 204 ------------------ tools/broccoli/trees/browser_tree.ts | 3 +- 4 files changed, 6 insertions(+), 218 deletions(-) delete mode 100644 modules/examples/src/forms/index.html delete mode 100644 modules/examples/src/forms/index.ts diff --git a/modules/angular2/src/forms/directives/template_driven_form_directive.ts b/modules/angular2/src/forms/directives/template_driven_form_directive.ts index b806acd9b9..de638f7dfc 100644 --- a/modules/angular2/src/forms/directives/template_driven_form_directive.ts +++ b/modules/angular2/src/forms/directives/template_driven_form_directive.ts @@ -58,7 +58,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple this._later(_ => { var container = this._findContainer(dir.path); if (isPresent(container)) { - container.removeControl(dir.name) container.updateValidity(); + container.removeControl(dir.name); + container.updateValidity(); } }); } @@ -76,7 +77,8 @@ export class TemplateDrivenFormDirective extends ControlContainerDirective imple this._later(_ => { var container = this._findContainer(dir.path); if (isPresent(container)) { - container.removeControl(dir.name) container.updateValidity(); + container.removeControl(dir.name); + container.updateValidity(); } }); } diff --git a/modules/examples/src/forms/index.html b/modules/examples/src/forms/index.html deleted file mode 100644 index 17ef21f8f0..0000000000 --- a/modules/examples/src/forms/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - Survey Builder - - - Loading... - - - $SCRIPTS$ - - diff --git a/modules/examples/src/forms/index.ts b/modules/examples/src/forms/index.ts deleted file mode 100644 index 51f9e2af94..0000000000 --- a/modules/examples/src/forms/index.ts +++ /dev/null @@ -1,204 +0,0 @@ -import {bootstrap, NgIf, NgFor, EventEmitter, Component, View} from 'angular2/angular2'; -import { - FormBuilder, - Validators, - formDirectives, - ControlGroup, - Control, - ControlArray -} from 'angular2/forms'; - -import {ObservableWrapper} from 'angular2/src/facade/async'; -import {print} from 'angular2/src/facade/lang'; - -// HeaderFields renders the bound header control group. It can used as follows: -// -// -// -// This component is self-contained and can be tested in isolation. -@Component({selector: 'survey-header', properties: ['header']}) -@View({ - template: ` -
-
- -
- Title is required -
-
- -
- -
- Description is required -
-
- -
- -
-
- `, - directives: [formDirectives, NgIf] -}) -class HeaderFields { - header: ControlGroup; -} - - - -// SurveyQuestion renders an individual question. It can used as follows: -// -// -// -// SurveyQuestion uses EventEmitter to fire the delete action. -// This component is self-contained and can be tested in isolation. -@Component({selector: 'survey-question', events: ['destroy'], properties: ['question', 'index']}) -@View({ - template: ` -

Question #{{index}}

- - - -
-
- -
- Type is required -
-
- -
- -
- Question is required -
-
- -
- -
- Length is required -
-
-
- `, - directives: [formDirectives, NgIf] -}) -class SurveyQuestion { - question: ControlGroup; - index: number; - destroy: EventEmitter; - - constructor() { this.destroy = new EventEmitter(); } - - deleteQuestion(): void { - // Invoking an injected event emitter will fire an event, - // which in this case will result in calling `deleteQuestion(i)` - ObservableWrapper.callNext(this.destroy, null); - } -} - - - -// SurveyBuilder is a form that allows you to create a survey. -@Component({selector: 'survey-builder-app', appInjector: [FormBuilder]}) -@View({ - template: ` -

Create New Survey

- -
- - - - - - - -
- `, - directives: [formDirectives, NgFor, HeaderFields, SurveyQuestion] -}) -class SurveyBuilder { - form: ControlGroup; - - constructor(public builder: FormBuilder) { - this.form = builder.group({ - "header": builder.group({ - "title": ["", Validators.required], - "description": ["", Validators.required], - "date": "" - }), - "questions": builder.array([]) - }); - } - - addQuestion(): void { - var newQuestion: ControlGroup = this.builder.group( - { - "type": ["", Validators.required], - "questionText": ["", Validators.required], - "responseLength": [100, Validators.required] - }, - { - // Optional controls can be dynamically added or removed from the form. - // Here, the responseLength field is optional and not included by default. - "optionals": {"responseLength": false} - }); - - // Every Control has an observable of value changes. You can subscribe to this observable - // to update the form, update the application model, etc. - // These observables can also be transformed and combined. This enables implementing - // complex form interactions in a declarative fashion. - // - // We are disabling the responseLength control when the question type is checkbox. - var typeCtrl: Control = newQuestion.controls['type']; - - ObservableWrapper.subscribe(typeCtrl.valueChanges, (v) => v == 'text' || v == 'textarea' ? - newQuestion.include('responseLength') : - newQuestion.exclude('responseLength')); - - (this.form.controls['questions']).push(newQuestion); - } - - destroyQuestion(index: number): void { - (this.form.controls['questions']).removeAt(index); - } - - submitForm(): void { - print('Submitting a form'); - print(` value: ${ this.form.value }`); - print(` valid: ${ this.form.valid }`); - print(` errors: ${ this.form.errors }`); - } -} -export function main() { - bootstrap(SurveyBuilder); -} diff --git a/tools/broccoli/trees/browser_tree.ts b/tools/broccoli/trees/browser_tree.ts index c7f264a467..692bcd81ba 100644 --- a/tools/broccoli/trees/browser_tree.ts +++ b/tools/broccoli/trees/browser_tree.ts @@ -38,7 +38,8 @@ const kServedPaths = [ // Relative (to /modules) paths to example directories 'examples/src/benchpress', - 'examples/src/forms', + 'examples/src/model_driven_forms', + 'examples/src/template_driven_forms', 'examples/src/gestures', 'examples/src/hello_world', 'examples/src/http',