NgModelGroup
directive
Creates and binds a FormGroup
instance to a DOM element.
NgModule
Selectors
Properties
Property | Description |
---|---|
@Input('ngModelGroup')name: string | Tracks the name of the |
Inherited from AbstractFormGroupDirective
-
control: FormGroup
-
path: string[]
-
formDirective: Form | null
-
validator: ValidatorFn | null
-
asyncValidator: AsyncValidatorFn | null
Inherited from ControlContainer
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" |
Description
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'; @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'}; } }
Inherited from AbstractFormGroupDirective
Inherited from AbstractControlDirective
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/forms/NgModelGroup