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



Creates and binds a FormGroup instance to a DOM element.

See more...



  • [ngModelGroup]


Property Description
@Input('ngModelGroup')name: string Tracks the name of the NgModelGroup bound to the directive. The name corresponds to a key in the parent NgForm.

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

Template variable references

Identifier Usage
ngModelGroup #myTemplateVar="ngModelGroup"


This directive can only be used as a child of NgForm (within <form> tags).

Use this directive to validate a sub-group of your form separately from the rest of your form, or if some values in your domain model make more sense to consume together in a nested object.

Provide a name for the sub-group and it will become the key for the sub-group in the form's full value. If you need direct access, export the directive into a local template variable using ngModelGroup (ex: #myGroup="ngModelGroup").

Consuming controls in a grouping

The following example shows you how to combine controls together in a sub-group of the form.

import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
      <p *ngIf="nameCtrl.invalid">Name is invalid.</p>
      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
        <input name="first" [ngModel]="name.first" minlength="2">
        <input name="last" [ngModel]="name.last" required>
      <input name="email" ngModel> 
    <button (click)="setValue()">Set value</button>
export class NgModelGroupComp {
  name = {first: 'Nancy', last: 'Drew'};

  onSubmit(f: NgForm) {
    console.log(f.value);  // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
    console.log(f.valid);  // true

  setValue() { = {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.