From 5c0cfdee48ba5aa48528a1c20ffd99318ee716ae Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Sun, 12 Jun 2016 16:37:42 -0700 Subject: [PATCH] fix(forms): separate ngModelGroup from formGroupName --- modules/@angular/common/src/forms.ts | 5 +- .../@angular/common/src/forms/directives.ts | 16 +-- .../abstract_form_group_directive.ts | 46 ++++++++ .../src/forms/directives/form_interface.ts | 11 +- .../src/forms/directives/ng_control_group.ts | 102 ------------------ .../common/src/forms/directives/ng_form.ts | 12 +-- .../src/forms/directives/ng_model_group.ts | 64 +++++++++++ .../form_control_name.ts | 20 ++-- .../form_group_directive.ts | 10 +- .../reactive_directives/form_group_name.ts | 73 +++++++++++++ .../common/src/forms/directives/shared.ts | 4 +- .../@angular/common/src/forms/form_builder.ts | 2 +- .../common/test/forms/directives_spec.ts | 11 +- .../common/test/forms/integration_spec.ts | 14 +-- 14 files changed, 236 insertions(+), 154 deletions(-) create mode 100644 modules/@angular/common/src/forms/directives/abstract_form_group_directive.ts delete mode 100644 modules/@angular/common/src/forms/directives/ng_control_group.ts create mode 100644 modules/@angular/common/src/forms/directives/ng_model_group.ts rename modules/@angular/common/src/forms/directives/{ => reactive_directives}/form_control_name.ts (88%) create mode 100644 modules/@angular/common/src/forms/directives/reactive_directives/form_group_name.ts diff --git a/modules/@angular/common/src/forms.ts b/modules/@angular/common/src/forms.ts index 3e30cd0bd2..8333300ac7 100644 --- a/modules/@angular/common/src/forms.ts +++ b/modules/@angular/common/src/forms.ts @@ -22,15 +22,16 @@ export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_ac export {ControlContainer} from './forms/directives/control_container'; export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_value_accessor'; export {DefaultValueAccessor} from './forms/directives/default_value_accessor'; -export {FormControlName} from './forms/directives/form_control_name'; export {Form} from './forms/directives/form_interface'; export {NgControl} from './forms/directives/ng_control'; -export {NgControlGroup} from './forms/directives/ng_control_group'; export {NgControlStatus} from './forms/directives/ng_control_status'; export {NgForm} from './forms/directives/ng_form'; export {NgModel} from './forms/directives/ng_model'; +export {NgModelGroup} from './forms/directives/ng_model_group'; export {FormControlDirective} from './forms/directives/reactive_directives/form_control_directive'; +export {FormControlName} from './forms/directives/reactive_directives/form_control_name'; export {FormGroupDirective} from './forms/directives/reactive_directives/form_group_directive'; +export {FormGroupName} from './forms/directives/reactive_directives/form_group_name'; export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor'; export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators'; export {FormBuilder} from './forms/form_builder'; diff --git a/modules/@angular/common/src/forms/directives.ts b/modules/@angular/common/src/forms/directives.ts index 3817784581..b8b4550817 100644 --- a/modules/@angular/common/src/forms/directives.ts +++ b/modules/@angular/common/src/forms/directives.ts @@ -2,15 +2,16 @@ import {Type} from '@angular/core'; import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor'; import {DefaultValueAccessor} from './directives/default_value_accessor'; -import {FormControlName} from './directives/form_control_name'; -import {NgControlGroup} from './directives/ng_control_group'; import {NgControlStatus} from './directives/ng_control_status'; import {NgForm} from './directives/ng_form'; import {NgModel} from './directives/ng_model'; +import {NgModelGroup} from './directives/ng_model_group'; import {NumberValueAccessor} from './directives/number_value_accessor'; import {RadioControlValueAccessor} from './directives/radio_control_value_accessor'; import {FormControlDirective} from './directives/reactive_directives/form_control_directive'; +import {FormControlName} from './directives/reactive_directives/form_control_name'; import {FormGroupDirective} from './directives/reactive_directives/form_group_directive'; +import {FormGroupName} from './directives/reactive_directives/form_group_name'; import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor'; import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators'; @@ -18,16 +19,17 @@ import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor'; export {ControlValueAccessor} from './directives/control_value_accessor'; export {DefaultValueAccessor} from './directives/default_value_accessor'; -export {FormControlName} from './directives/form_control_name'; export {NgControl} from './directives/ng_control'; -export {NgControlGroup} from './directives/ng_control_group'; export {NgControlStatus} from './directives/ng_control_status'; export {NgForm} from './directives/ng_form'; export {NgModel} from './directives/ng_model'; +export {NgModelGroup} from './directives/ng_model_group'; export {NumberValueAccessor} from './directives/number_value_accessor'; export {RadioButtonState, RadioControlValueAccessor} from './directives/radio_control_value_accessor'; export {FormControlDirective} from './directives/reactive_directives/form_control_directive'; +export {FormControlName} from './directives/reactive_directives/form_control_name'; export {FormGroupDirective} from './directives/reactive_directives/form_group_directive'; +export {FormGroupName} from './directives/reactive_directives/form_group_name'; export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor'; export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators'; @@ -52,9 +54,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida * @experimental */ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[ - NgControlGroup, - - NgModel, NgForm, + NgModel, NgModelGroup, NgForm, NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor, @@ -64,4 +64,4 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[ ]; export const REACTIVE_FORM_DIRECTIVES: Type[] = - /*@ts2dart_const*/[FormControlDirective, FormGroupDirective, FormControlName]; \ No newline at end of file + /*@ts2dart_const*/[FormControlDirective, FormGroupDirective, FormControlName, FormGroupName]; \ No newline at end of file diff --git a/modules/@angular/common/src/forms/directives/abstract_form_group_directive.ts b/modules/@angular/common/src/forms/directives/abstract_form_group_directive.ts new file mode 100644 index 0000000000..03009be8f4 --- /dev/null +++ b/modules/@angular/common/src/forms/directives/abstract_form_group_directive.ts @@ -0,0 +1,46 @@ +import {OnDestroy, OnInit} from '@angular/core'; + +import {FormGroup} from '../model'; + +import {ControlContainer} from './control_container'; +import {Form} from './form_interface'; +import {composeAsyncValidators, composeValidators, controlPath} from './shared'; +import {AsyncValidatorFn, ValidatorFn} from './validators'; + +/** + This is a base class for code shared between {@link NgModelGroup} and {@link FormGroupName}. + */ + +export class AbstractFormGroupDirective extends ControlContainer implements OnInit, OnDestroy { + /** @internal */ + _parent: ControlContainer; + + /** @internal */ + _validators: any[]; + + /** @internal */ + _asyncValidators: any[]; + + ngOnInit(): void { this.formDirective.addFormGroup(this); } + + ngOnDestroy(): void { this.formDirective.removeFormGroup(this); } + + /** + * Get the {@link FormGroup} backing this binding. + */ + get control(): FormGroup { return this.formDirective.getFormGroup(this); } + + /** + * Get the path to this control group. + */ + get path(): string[] { return controlPath(this.name, this._parent); } + + /** + * Get the {@link Form} to which this group belongs. + */ + get formDirective(): Form { return this._parent.formDirective; } + + get validator(): ValidatorFn { return composeValidators(this._validators); } + + get asyncValidator(): AsyncValidatorFn { return composeAsyncValidators(this._asyncValidators); } +} diff --git a/modules/@angular/common/src/forms/directives/form_interface.ts b/modules/@angular/common/src/forms/directives/form_interface.ts index 511c0a4af9..13fdf68e4d 100644 --- a/modules/@angular/common/src/forms/directives/form_interface.ts +++ b/modules/@angular/common/src/forms/directives/form_interface.ts @@ -1,7 +1,8 @@ import {FormControl, FormGroup} from '../model'; +import {AbstractFormGroupDirective} from './abstract_form_group_directive'; import {NgControl} from './ng_control'; -import {NgControlGroup} from './ng_control_group'; + /** @@ -30,17 +31,17 @@ export interface Form { /** * Add a group of controls to this form. */ - addFormGroup(dir: NgControlGroup): void; + addFormGroup(dir: AbstractFormGroupDirective): void; /** * Remove a group of controls from this form. */ - removeFormGroup(dir: NgControlGroup): void; + removeFormGroup(dir: AbstractFormGroupDirective): void; /** - * Look up the {@link FormGroup} associated with a particular {@link NgControlGroup}. + * Look up the {@link FormGroup} associated with a particular {@link AbstractFormGroupDirective}. */ - getFormGroup(dir: NgControlGroup): FormGroup; + getFormGroup(dir: AbstractFormGroupDirective): FormGroup; /** * Update the model for a particular control with a new value. diff --git a/modules/@angular/common/src/forms/directives/ng_control_group.ts b/modules/@angular/common/src/forms/directives/ng_control_group.ts deleted file mode 100644 index d5e7cb06e1..0000000000 --- a/modules/@angular/common/src/forms/directives/ng_control_group.ts +++ /dev/null @@ -1,102 +0,0 @@ -import {Directive, Host, Inject, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core'; - -import {FormGroup} from '../model'; -import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; - -import {ControlContainer} from './control_container'; -import {Form} from './form_interface'; -import {composeAsyncValidators, composeValidators, controlPath} from './shared'; -import {AsyncValidatorFn, ValidatorFn} from './validators'; - -export const controlGroupProvider: any = - /*@ts2dart_const*/ /* @ts2dart_Provider */ { - provide: ControlContainer, - useExisting: forwardRef(() => NgControlGroup) - }; - -/** - * Creates and binds a control group to a DOM element. - * - * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}. - * - * ```typescript - * @Component({ - * selector: 'my-app', - * template: ` - *
- *

Angular FormControl & FormGroup Example

- *
- *
- *

Enter your name:

- *

First:

- *

Middle:

- *

Last:

- *
- *

Name value:

- * 
{{valueOf(cgName)}}
- *

Name is {{cgName?.control?.valid ? "valid" : "invalid"}}

- *

What's your favorite food?

- *

- *

Form value

- * 
{{valueOf(f)}}
- *
- *
- * ` - * }) - * export class App { - * valueOf(cg: NgControlGroup): string { - * if (cg.control == null) { - * return null; - * } - * return JSON.stringify(cg.control.value, null, 2); - * } - * } - * ``` - * - * This example declares a control group for a user's name. The value and validation state of - * this group can be accessed separately from the overall form. - * - * @experimental - */ -@Directive({ - selector: '[ngControlGroup]', - providers: [controlGroupProvider], - inputs: ['name: ngControlGroup'], - exportAs: 'ngForm' -}) -export class NgControlGroup extends ControlContainer implements OnInit, - OnDestroy { - /** @internal */ - _parent: ControlContainer; - - constructor( - @Host() @SkipSelf() parent: ControlContainer, - @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[], - @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) private _asyncValidators: any[]) { - super(); - this._parent = parent; - } - - ngOnInit(): void { this.formDirective.addFormGroup(this); } - - ngOnDestroy(): void { this.formDirective.removeFormGroup(this); } - - /** - * Get the {@link FormGroup} backing this binding. - */ - get control(): FormGroup { return this.formDirective.getFormGroup(this); } - - /** - * Get the path to this control group. - */ - get path(): string[] { return controlPath(this.name, this._parent); } - - /** - * Get the {@link Form} to which this group belongs. - */ - get formDirective(): Form { return this._parent.formDirective; } - - get validator(): ValidatorFn { return composeValidators(this._validators); } - - get asyncValidator(): AsyncValidatorFn { return composeAsyncValidators(this._asyncValidators); } -} diff --git a/modules/@angular/common/src/forms/directives/ng_form.ts b/modules/@angular/common/src/forms/directives/ng_form.ts index ad2a7cc65a..3ada4e4a4e 100644 --- a/modules/@angular/common/src/forms/directives/ng_form.ts +++ b/modules/@angular/common/src/forms/directives/ng_form.ts @@ -9,7 +9,7 @@ import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; import {ControlContainer} from './control_container'; import {Form} from './form_interface'; import {NgControl} from './ng_control'; -import {NgControlGroup} from './ng_control_group'; +import {NgModelGroup} from './ng_model_group'; import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared'; export const formDirectiveProvider: any = @@ -44,12 +44,12 @@ export const formDirectiveProvider: any = *

NgForm demo

*
*

Control group: credentials

- *
+ *
*

Login:

*

Password:

*
*

Control group: person

- *
+ *
*

First name:

*

Last name:

*
@@ -129,7 +129,7 @@ export class NgForm extends ControlContainer implements Form { }); } - addFormGroup(dir: NgControlGroup): void { + addFormGroup(dir: NgModelGroup): void { PromiseWrapper.scheduleMicrotask(() => { var container = this._findContainer(dir.path); var group = new FormGroup({}); @@ -139,7 +139,7 @@ export class NgForm extends ControlContainer implements Form { }); } - removeFormGroup(dir: NgControlGroup): void { + removeFormGroup(dir: NgModelGroup): void { PromiseWrapper.scheduleMicrotask(() => { var container = this._findContainer(dir.path); if (isPresent(container)) { @@ -148,7 +148,7 @@ export class NgForm extends ControlContainer implements Form { }); } - getFormGroup(dir: NgControlGroup): FormGroup { return this.form.find(dir.path); } + getFormGroup(dir: NgModelGroup): FormGroup { return this.form.find(dir.path); } updateModel(dir: NgControl, value: any): void { PromiseWrapper.scheduleMicrotask(() => { diff --git a/modules/@angular/common/src/forms/directives/ng_model_group.ts b/modules/@angular/common/src/forms/directives/ng_model_group.ts new file mode 100644 index 0000000000..2184bc92b7 --- /dev/null +++ b/modules/@angular/common/src/forms/directives/ng_model_group.ts @@ -0,0 +1,64 @@ +import {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core'; + +import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; + +import {AbstractFormGroupDirective} from './abstract_form_group_directive'; +import {ControlContainer} from './control_container'; + +export const modelGroupProvider: any = + /*@ts2dart_const*/ /* @ts2dart_Provider */ { + provide: ControlContainer, + useExisting: forwardRef(() => NgModelGroup) + }; + +/** + * Creates and binds a model group to a DOM element. + * + * This directive can only be used as a child of {@link NgForm}. + * + * ```typescript + * @Component({ + * selector: 'my-app', + * template: ` + *
+ *

Angular forms Example

+ * + *
+ *

Enter your name:

+ *

First:

+ *

Middle:

+ *

Last:

+ *
+ *

Name value:

+ * 
{{ mgName | json }}
+ *

Name is {{mgName?.valid ? "valid" : "invalid"}}

+ *

What's your favorite food?

+ *

+ *

Form value

+ * 
{{ f | json }}
+ * + *
+ * ` + * }) + * export class App {} + * ``` + * + * This example declares a model group for a user's name. The value and validation state of + * this group can be accessed separately from the overall form. + * + * @experimental + */ +@Directive({selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup'}) +export class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy { + @Input('ngModelGroup') name: string; + + constructor( + @Host() @SkipSelf() parent: ControlContainer, + @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[], + @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) { + super(); + this._parent = parent; + this._validators = validators; + this._asyncValidators = asyncValidators; + } +} diff --git a/modules/@angular/common/src/forms/directives/form_control_name.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_control_name.ts similarity index 88% rename from modules/@angular/common/src/forms/directives/form_control_name.ts rename to modules/@angular/common/src/forms/directives/reactive_directives/form_control_name.ts index d84e85b086..2c17763020 100644 --- a/modules/@angular/common/src/forms/directives/form_control_name.ts +++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_control_name.ts @@ -1,14 +1,14 @@ import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, SkipSelf, forwardRef} from '@angular/core'; -import {EventEmitter, ObservableWrapper} from '../../facade/async'; -import {FormControl} from '../model'; -import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; +import {EventEmitter, ObservableWrapper} from '../../../facade/async'; +import {FormControl} from '../../model'; +import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators'; -import {ControlContainer} from './control_container'; -import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; -import {NgControl} from './ng_control'; -import {composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor} from './shared'; -import {AsyncValidatorFn, ValidatorFn} from './validators'; +import {ControlContainer} from '../control_container'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor'; +import {NgControl} from '../ng_control'; +import {composeAsyncValidators, composeValidators, controlPath, isPropertyUpdated, selectValueAccessor} from '../shared'; +import {AsyncValidatorFn, ValidatorFn} from '../validators'; export const controlNameBinding: any = @@ -18,9 +18,9 @@ export const controlNameBinding: any = }; /** - * Creates and binds a form control with a specified name to a DOM element. + * Syncs an existing form control with the specified name to a DOM element. * - * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}. + * This directive can only be used as a child of {@link FormGroupDirective}. * ### Example * diff --git a/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts index f01548bc19..1f3278efe7 100644 --- a/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts +++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts @@ -6,13 +6,13 @@ import {BaseException} from '../../../facade/exceptions'; import {isBlank} from '../../../facade/lang'; import {FormControl, FormGroup} from '../../model'; import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators'; - import {ControlContainer} from '../control_container'; import {Form} from '../form_interface'; import {NgControl} from '../ng_control'; -import {NgControlGroup} from '../ng_control_group'; import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from '../shared'; +import {FormGroupName} from './form_group_name'; + export const formDirectiveProvider: any = /*@ts2dart_const*/ /* @ts2dart_Provider */ { provide: ControlContainer, @@ -148,15 +148,15 @@ export class FormGroupDirective extends ControlContainer implements Form, removeControl(dir: NgControl): void { ListWrapper.remove(this.directives, dir); } - addFormGroup(dir: NgControlGroup) { + addFormGroup(dir: FormGroupName) { var ctrl: any = this.form.find(dir.path); setUpFormGroup(ctrl, dir); ctrl.updateValueAndValidity({emitEvent: false}); } - removeFormGroup(dir: NgControlGroup) {} + removeFormGroup(dir: FormGroupName) {} - getFormGroup(dir: NgControlGroup): FormGroup { return this.form.find(dir.path); } + getFormGroup(dir: FormGroupName): FormGroup { return this.form.find(dir.path); } updateModel(dir: NgControl, value: any): void { var ctrl  = this.form.find(dir.path); diff --git a/modules/@angular/common/src/forms/directives/reactive_directives/form_group_name.ts b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_name.ts new file mode 100644 index 0000000000..b67ac8c78f --- /dev/null +++ b/modules/@angular/common/src/forms/directives/reactive_directives/form_group_name.ts @@ -0,0 +1,73 @@ +import {Directive, Host, Inject, Input, OnDestroy, OnInit, Optional, Self, SkipSelf, forwardRef} from '@angular/core'; +import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators'; +import {AbstractFormGroupDirective} from '../abstract_form_group_directive'; +import {ControlContainer} from '../control_container'; + +export const formGroupNameProvider: any = + /*@ts2dart_const*/ /* @ts2dart_Provider */ { + provide: ControlContainer, + useExisting: forwardRef(() => FormGroupName) + }; + +/** + * Syncs an existing form group to a DOM element. + * + * This directive can only be used as a child of {@link FormGroupDirective}. + * + * ```typescript + * @Component({ + * selector: 'my-app', + * template: ` + *
+ *

Angular FormGroup Example

+ *
+ *
+ *

Enter your name:

+ *

First:

+ *

Middle:

+ *

Last:

+ *
+ *

Name value:

+ * 
{{ nameGroup | json }}
+ *

Name is {{nameGroup?.valid ? "valid" : "invalid"}}

+ *

What's your favorite food?

+ *

+ *

Form value

+ * 
 {{ myForm | json }}
+ *
+ *
+ * ` + * }) + * export class App { + * nameGroup = new FormGroup({ + * first: new FormControl('', Validators.required), + * middle: new FormControl(''), + * last: new FormControl('', Validators.required) + * }); + * + * myForm = new FormGroup({ + * name: this.nameGroup, + * food: new FormControl() + * }); + * } + * ``` + * + * This example syncs the form group for the user's name. The value and validation state of + * this group can be accessed separately from the overall form. + * + * @experimental + */ +@Directive({selector: '[formGroupName]', providers: [formGroupNameProvider]}) +export class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy { + @Input('formGroupName') name: string; + + constructor( + @Host() @SkipSelf() parent: ControlContainer, + @Optional() @Self() @Inject(NG_VALIDATORS) validators: any[], + @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators: any[]) { + super(); + this._parent = parent; + this._validators = validators; + this._asyncValidators = asyncValidators; + } +} diff --git a/modules/@angular/common/src/forms/directives/shared.ts b/modules/@angular/common/src/forms/directives/shared.ts index 245136f811..827595fc5d 100644 --- a/modules/@angular/common/src/forms/directives/shared.ts +++ b/modules/@angular/common/src/forms/directives/shared.ts @@ -5,12 +5,12 @@ import {FormControl, FormGroup} from '../model'; import {Validators} from '../validators'; import {AbstractControlDirective} from './abstract_control_directive'; +import {AbstractFormGroupDirective} from './abstract_form_group_directive'; import {CheckboxControlValueAccessor} from './checkbox_value_accessor'; import {ControlContainer} from './control_container'; import {ControlValueAccessor} from './control_value_accessor'; import {DefaultValueAccessor} from './default_value_accessor'; import {NgControl} from './ng_control'; -import {NgControlGroup} from './ng_control_group'; import {normalizeAsyncValidator, normalizeValidator} from './normalize_validator'; import {NumberValueAccessor} from './number_value_accessor'; import {RadioControlValueAccessor} from './radio_control_value_accessor'; @@ -46,7 +46,7 @@ export function setUpControl(control: FormControl, dir: NgControl): void { dir.valueAccessor.registerOnTouched(() => control.markAsTouched()); } -export function setUpFormGroup(control: FormGroup, dir: NgControlGroup) { +export function setUpFormGroup(control: FormGroup, dir: AbstractFormGroupDirective) { if (isBlank(control)) _throwError(dir, 'Cannot find control'); control.validator = Validators.compose([control.validator, dir.validator]); control.asyncValidator = Validators.composeAsync([control.asyncValidator, dir.asyncValidator]); diff --git a/modules/@angular/common/src/forms/form_builder.ts b/modules/@angular/common/src/forms/form_builder.ts index a5eceb2cf3..46288f89aa 100644 --- a/modules/@angular/common/src/forms/form_builder.ts +++ b/modules/@angular/common/src/forms/form_builder.ts @@ -17,7 +17,7 @@ import * as modelModule from './model'; * template: ` *
*

Login

- *
+ *
*

Password

*

Confirm password

*
diff --git a/modules/@angular/common/test/forms/directives_spec.ts b/modules/@angular/common/test/forms/directives_spec.ts index 0e6ebc9c0c..97c49e505f 100644 --- a/modules/@angular/common/test/forms/directives_spec.ts +++ b/modules/@angular/common/test/forms/directives_spec.ts @@ -4,8 +4,7 @@ import {fakeAsync, flushMicrotasks, Log, tick,} from '@angular/core/testing'; import {SpyNgControl, SpyValueAccessor} from '../spies'; -import {FormGroup, FormControl, FormControlName, NgControlGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms'; - +import {FormGroup, FormControl, FormControlName, FormGroupName, NgModelGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms'; import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared'; import {TimerWrapper} from '../../src/facade/async'; @@ -195,7 +194,7 @@ export function main() { }; it('should set up validator', fakeAsync(() => { - var group = new NgControlGroup( + var group = new FormGroupName( form, [matchingPasswordsValidator], [asyncValidator('expected')]); group.name = 'passwords'; form.addFormGroup(group); @@ -271,7 +270,7 @@ export function main() { form = new NgForm([], []); formModel = form.form; - personControlGroupDir = new NgControlGroup(form, [], []); + personControlGroupDir = new NgModelGroup(form, [], []); personControlGroupDir.name = 'person'; loginControlDir = new FormControlName(personControlGroupDir, null, null, [defaultAccessor]); @@ -338,7 +337,7 @@ export function main() { })); }); - describe('NgControlGroup', () => { + describe('FormGroupName', () => { var formModel: any /** TODO #9100 */; var controlGroupDir: any /** TODO #9100 */; @@ -347,7 +346,7 @@ export function main() { var parent = new FormGroupDirective([], []); parent.form = new FormGroup({'group': formModel}); - controlGroupDir = new NgControlGroup(parent, [], []); + controlGroupDir = new FormGroupName(parent, [], []); controlGroupDir.name = 'group'; }); diff --git a/modules/@angular/common/test/forms/integration_spec.ts b/modules/@angular/common/test/forms/integration_spec.ts index 22b14d3192..f91fdb1fc1 100644 --- a/modules/@angular/common/test/forms/integration_spec.ts +++ b/modules/@angular/common/test/forms/integration_spec.ts @@ -991,7 +991,7 @@ export function main() { new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})}); const t = `
-
+
`; @@ -1014,7 +1014,7 @@ export function main() { new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})}); const t = `
-
+
`; @@ -1083,8 +1083,8 @@ export function main() { it('should add new controls and control groups', fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { const t = ` -
- +
+
`; @@ -1137,7 +1137,7 @@ export function main() { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { const t = `
- +
`; @@ -1161,7 +1161,7 @@ export function main() { it('should remove control groups', fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { const t = `
-
+
`; @@ -1492,7 +1492,7 @@ export function main() { // {{x.valid}} used to crash because valid() tried to read a property // from form.control before it was set. This test verifies this bug is // fixed. - const t = `
+ const t = `
{{x.valid}}`; let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); tick();