NgModelGroup

directive

npm Package	@angular/forms
Module	import { NgModelGroup } from '@angular/forms';
Source	forms/src/directives/ng_model_group.ts

Overview

@Directive({ selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup' })
class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy {
  name: string
  // inherited from forms/AbstractFormGroupDirective
  ngOnInit(): void
  ngOnDestroy(): void
  get control: FormGroup
  get path: string[]
  get formDirective: Form | null
  get validator: ValidatorFn | null
  get asyncValidator: AsyncValidatorFn | null
  // inherited from forms/ControlContainer
  name: string
  get formDirective: Form | null
  get path: string[] | null
  // inherited from forms/AbstractControlDirective
  get control: AbstractControl | null
  get value: any
  get valid: boolean | null
  get invalid: boolean | null
  get pending: boolean | null
  get disabled: boolean | null
  get enabled: boolean | null
  get errors: ValidationErrors | null
  get pristine: boolean | null
  get dirty: boolean | null
  get touched: boolean | null
  get status: string | null
  get untouched: boolean | null
  get statusChanges: Observable<any> | null
  get valueChanges: Observable<any> | null
  get path: string[] | null
  reset(value: any = undefined): void
  hasError(errorCode: string, path?: string[]): boolean
  getError(errorCode: string, path?: string[]): any
}

How To Use

This directive can only be used as a child of NgForm (or in other words, within <form> tags).

Use this directive if you'd like to create a sub-group within a form. This can come in handy if you want 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.

Pass in the name you'd like this sub-group to have and it will become the key for the sub-group in the form's full value. You can also export the directive into a local template variable using ngModelGroup (ex: #myGroup="ngModelGroup").

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

@Component({
  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>
      </div>
      
      <input name="email" ngModel> 
      <button>Submit</button>
    </form>
    
    <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() { this.name = {first: 'Bess', last: 'Marvin'}; }
}

• npm package: @angular/forms

• NgModule: FormsModule

Selectors

[ngModelGroup]

Inputs

Exported as

Constructor

Members

name: string