From fee28e20bb29cab5c397c1b527a8f12e889060af Mon Sep 17 00:00:00 2001 From: LASLEDJ Date: Tue, 10 Sep 2019 22:39:47 +0200 Subject: [PATCH] feat(forms): formGroupName and formArrayName also accepts a number (#32607) For consistency, `FormGroupName` and `FormaArrayName` also accepts a number as input's type like `FormControlName` Closes https://github.com/angular/angular/issues/32436 PR Close #32607 --- .../abstract_form_group_directive.ts | 4 ++- .../forms/src/directives/control_container.ts | 2 +- .../reactive_directives/form_group_name.ts | 34 ++++++++++++------- tools/public_api_guard/forms/forms.d.ts | 6 ++-- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/packages/forms/src/directives/abstract_form_group_directive.ts b/packages/forms/src/directives/abstract_form_group_directive.ts index a16752dbf3..9a73f32656 100644 --- a/packages/forms/src/directives/abstract_form_group_directive.ts +++ b/packages/forms/src/directives/abstract_form_group_directive.ts @@ -82,7 +82,9 @@ export class AbstractFormGroupDirective extends ControlContainer implements OnIn * @description * The path to this group from the top-level directive. */ - get path(): string[] { return controlPath(this.name, this._parent); } + get path(): string[] { + return controlPath(this.name == null ? this.name : this.name.toString(), this._parent); + } /** * @description diff --git a/packages/forms/src/directives/control_container.ts b/packages/forms/src/directives/control_container.ts index 13dc6376a8..254d3c7827 100644 --- a/packages/forms/src/directives/control_container.ts +++ b/packages/forms/src/directives/control_container.ts @@ -23,7 +23,7 @@ export abstract class ControlContainer extends AbstractControlDirective { * The name for the control */ // TODO(issue/24571): remove '!'. - name !: string; + name !: string | number | null; /** * @description diff --git a/packages/forms/src/directives/reactive_directives/form_group_name.ts b/packages/forms/src/directives/reactive_directives/form_group_name.ts index e7c5a69f45..92ca96a17b 100644 --- a/packages/forms/src/directives/reactive_directives/form_group_name.ts +++ b/packages/forms/src/directives/reactive_directives/form_group_name.ts @@ -37,23 +37,23 @@ export const formGroupNameProvider: any = { * Use nested form groups to validate a sub-group of a * form separately from the rest or to group the values of certain * controls into their own nested object. - * + * * @see [Reactive Forms Guide](guide/reactive-forms) * * @usageNotes - * + * * ### Access the group by name - * - * The following example uses the {@link AbstractControl#get get} method to access the + * + * The following example uses the {@link AbstractControl#get get} method to access the * associated `FormGroup` * * ```ts * this.form.get('name'); * ``` - * + * * ### Access individual controls in the group - * - * The following example uses the {@link AbstractControl#get get} method to access + * + * The following example uses the {@link AbstractControl#get get} method to access * individual controls within the group using dot syntax. * * ```ts @@ -61,7 +61,7 @@ export const formGroupNameProvider: any = { * ``` * * ### Register a nested `FormGroup`. - * + * * The following example registers a nested *name* `FormGroup` within an existing `FormGroup`, * and provides methods to retrieve the nested `FormGroup` and individual controls. * @@ -76,9 +76,13 @@ export class FormGroupName extends AbstractFormGroupDirective implements OnInit, * @description * Tracks the name of the `FormGroup` bound to the directive. The name corresponds * to a key in the parent `FormGroup` or `FormArray`. + * Accepts a name as a string or a number. + * The name in the form of a string is useful for individual forms, + * while the numerical form allows for form groups to be bound + * to indices when iterating over groups in a `FormArray`. */ // TODO(issue/24571): remove '!'. - @Input('formGroupName') name !: string; + @Input('formGroupName') name !: string | number | null; constructor( @Optional() @Host() @SkipSelf() parent: ControlContainer, @@ -114,7 +118,7 @@ export const formArrayNameProvider: any = { * It accepts the string name of the nested `FormArray` you want to link, and * will look for a `FormArray` registered with that name in the parent * `FormGroup` instance you passed into `FormGroupDirective`. - * + * * @see [Reactive Forms Guide](guide/reactive-forms) * @see `AbstractControl` * @@ -142,9 +146,13 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy * @description * Tracks the name of the `FormArray` bound to the directive. The name corresponds * to a key in the parent `FormGroup` or `FormArray`. + * Accepts a name as a string or a number. + * The name in the form of a string is useful for individual forms, + * while the numerical form allows for form arrays to be bound + * to indices when iterating over arrays in a `FormArray`. */ // TODO(issue/24571): remove '!'. - @Input('formArrayName') name !: string; + @Input('formArrayName') name !: string | number | null; constructor( @Optional() @Host() @SkipSelf() parent: ControlContainer, @@ -196,7 +204,9 @@ export class FormArrayName extends ControlContainer implements OnInit, OnDestroy * Returns an array that represents the path from the top-level form to this control. * Each index is the string name of the control on that level. */ - get path(): string[] { return controlPath(this.name, this._parent); } + get path(): string[] { + return controlPath(this.name == null ? this.name : this.name.toString(), this._parent); + } /** * @description diff --git a/tools/public_api_guard/forms/forms.d.ts b/tools/public_api_guard/forms/forms.d.ts index 2b791597ae..d46b751a65 100644 --- a/tools/public_api_guard/forms/forms.d.ts +++ b/tools/public_api_guard/forms/forms.d.ts @@ -128,7 +128,7 @@ export declare const COMPOSITION_BUFFER_MODE: InjectionToken; export declare abstract class ControlContainer extends AbstractControlDirective { readonly formDirective: Form | null; - name: string; + name: string | number | null; readonly path: string[] | null; } @@ -194,7 +194,7 @@ export declare class FormArrayName extends ControlContainer implements OnInit, O readonly asyncValidator: AsyncValidatorFn | null; readonly control: FormArray; readonly formDirective: FormGroupDirective | null; - name: string; + name: string | number | null; readonly path: string[]; readonly validator: ValidatorFn | null; constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]); @@ -322,7 +322,7 @@ export declare class FormGroupDirective extends ControlContainer implements Form } export declare class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy { - name: string; + name: string | number | null; constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]); }