From Get docs
< @angular/formsAngular/docs/8/api/forms/formgroupname



Syncs a nested FormGroup to a DOM element.

See more...

See also



  • [formGroupName]


Property Description
@Input('formGroupName')name: string Tracks the name of the FormGroup bound to the directive. The name corresponds to a key in the parent FormGroup or FormArray.

Inherited from AbstractFormGroupDirective

  • control: FormGroup
  • path: string[]
  • formDirective: Form | null
  • validator: ValidatorFn | null
  • asyncValidator: AsyncValidatorFn | null

Inherited from ControlContainer

  • name: string
  • formDirective: Form | null
  • path: string[] | null

Inherited from AbstractControlDirective

  • abstract control: AbstractControl | null
  • value: any
  • valid: boolean | null
  • invalid: boolean | null
  • pending: boolean | null
  • disabled: boolean | null
  • enabled: boolean | null
  • errors: ValidationErrors | null
  • pristine: boolean | null
  • dirty: boolean | null
  • touched: boolean | null
  • status: string | null
  • untouched: boolean | null
  • statusChanges: Observable<any> | null
  • valueChanges: Observable<any> | null
  • path: string[] | null


This directive can only be used with a parent FormGroupDirective.

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

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.

Access the group by name

The following example uses the get method to access the associated FormGroup


Access individual controls in the group

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


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.

import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <p *ngIf="name.invalid">Name is invalid.</p>

      <div formGroupName="name">
        <input formControlName="first" placeholder="First name">
        <input formControlName="last" placeholder="Last name">
      <input formControlName="email" placeholder="Email">
      <button type="submit">Submit</button>

    <button (click)="setPreset()">Set preset</button>
export class NestedFormGroupComp {
  form = new FormGroup({
    name: new FormGroup({
      first: new FormControl('Nancy', Validators.minLength(2)),
      last: new FormControl('Drew', Validators.required)
    email: new FormControl()

  get first(): any { return this.form.get('name.first'); }

  get name(): any { return this.form.get('name'); }

  onSubmit() {
    console.log(this.first.value);  // 'Nancy'
    console.log(;   // {first: 'Nancy', last: 'Drew'}
    console.log(this.form.value);   // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
    console.log(this.form.status);  // VALID

  setPreset() {{first: 'Bess', last: 'Marvin'}); }

Inherited from AbstractFormGroupDirective

  • ngOnInit(): void
  • ngOnDestroy(): void

Inherited from AbstractControlDirective

  • reset(value: any = undefined): void
  • hasError(errorCode: string, path?: string | (string | number)[]): boolean
  • getError(errorCode: string, path?: string | (string | number)[]): any

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.