{ "id": "api/forms/FormArrayName", "title": "FormArrayName", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

FormArrayNamelink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Syncs a nested FormArray to a DOM element.

\n\n

See more...

\n
\n \n \n \n \n
\n

See alsolink

\n \n
\n\n\n

NgModulelink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input('formArrayName')
name: string | number | null\n 		\n \n

Tracks the name of the FormArray bound to the directive. The name corresponds\nto a key in the parent FormGroup or FormArray.\nAccepts a name as a string or a number.\nThe name in the form of a string is useful for individual forms,\nwhile the numerical form allows for form arrays to be bound\nto indices when iterating over arrays in a FormArray.

\n\n \n
\n \n control: FormArray\n Read-Only\n \n

The FormArray bound to this directive.

\n\n \n
\n \n formDirective: FormGroupDirective | null\n Read-Only\n \n

The top-level directive for this group if present, otherwise null.

\n\n \n
\n \n path: string[]\n Read-Only\n \n

Returns an array that represents the path from the top-level form to this control.\nEach index is the string name of the control on that level.

\n\n \n
\n
\n\n\n
\n

Inherited from ControlContainerlink

\n \n
\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n

This directive is designed to be used with a parent FormGroupDirective (selector:\n[formGroup]).

\n

It accepts the string name of the nested FormArray you want to link, and\nwill look for a FormArray registered with that name in the parent\nFormGroup instance you passed into FormGroupDirective.

\n\n

Examplelink

\n\nimport {Component} from '@angular/core';\nimport {FormArray, FormControl, FormGroup} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <div formArrayName=\"cities\">\n <div *ngFor=\"let city of cities.controls; index as i\">\n <input [formControlName]=\"i\" placeholder=\"City\">\n </div>\n </div>\n <button>Submit</button>\n </form>\n\n <button (click)=\"addCity()\">Add City</button>\n <button (click)=\"setPreset()\">Set preset</button>\n `,\n})\nexport class NestedFormArray {\n form = new FormGroup({\n cities: new FormArray([\n new FormControl('SF'),\n new FormControl('NY'),\n ]),\n });\n\n get cities(): FormArray {\n return this.form.get('cities') as FormArray;\n }\n\n addCity() {\n this.cities.push(new FormControl());\n }\n\n onSubmit() {\n console.log(this.cities.value); // ['SF', 'NY']\n console.log(this.form.value); // { cities: ['SF', 'NY'] }\n }\n\n setPreset() {\n this.cities.patchValue(['LA', 'MTV']);\n }\n}\n\n\n\n
\n \n\n \n\n \n\n \n\n \n\n\n\n\n
\n

Inherited from AbstractControlDirectivelink

\n \n
\n\n\n\n\n \n \n\n
\n
\n\n\n" }