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

FormGroupNamelink

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

Syncs a nested FormGroup 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
PropertyDescription
\n \n @Input('formGroupName')
name: string | number | null\n 		\n \n

Tracks the name of the FormGroup 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 groups to be bound\nto indices when iterating over groups in a FormArray.

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

Inherited from AbstractFormGroupDirectivelink

\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
\n

Descriptionlink

\n

This directive can only be used with a parent FormGroupDirective.

\n

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

\n

Use nested form groups to validate a sub-group of a\nform separately from the rest or to group the values of certain\ncontrols into their own nested object.

\n\n

Access the group by namelink

\n

The following example uses the get method to access the\nassociated FormGroup

\n\n this.form.get('name');\n\n

Access individual controls in the grouplink

\n

The following example uses the get method to access\nindividual controls within the group using dot syntax.

\n\n this.form.get('name.first');\n\n

Register a nested FormGroup.link

\n

The following example registers a nested name FormGroup within an existing FormGroup,\nand provides methods to retrieve the nested FormGroup and individual controls.

\n\nimport {Component} from '@angular/core';\nimport {FormControl, FormGroup, Validators} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <p *ngIf=\"name.invalid\">Name is invalid.</p>\n\n <div formGroupName=\"name\">\n <input formControlName=\"first\" placeholder=\"First name\">\n <input formControlName=\"last\" placeholder=\"Last name\">\n </div>\n <input formControlName=\"email\" placeholder=\"Email\">\n <button type=\"submit\">Submit</button>\n </form>\n\n <button (click)=\"setPreset()\">Set preset</button>\n`,\n})\nexport class NestedFormGroupComp {\n form = new FormGroup({\n name: new FormGroup({\n first: new FormControl('Nancy', Validators.minLength(2)),\n last: new FormControl('Drew', Validators.required)\n }),\n email: new FormControl()\n });\n\n get first(): any {\n return this.form.get('name.first');\n }\n\n get name(): any {\n return this.form.get('name');\n }\n\n onSubmit() {\n console.log(this.first.value); // 'Nancy'\n console.log(this.name.value); // {first: 'Nancy', last: 'Drew'}\n console.log(this.form.value); // {name: {first: 'Nancy', last: 'Drew'}, email: ''}\n console.log(this.form.status); // VALID\n }\n\n setPreset() {\n this.name.setValue({first: 'Bess', last: 'Marvin'});\n }\n}\n\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\n" }