directive
Creates and binds a FormGroup instance to a DOM element.
| Property | Description |
|---|---|
name: string |
AbstractFormGroupDirective
ControlContainer
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 validator: ValidatorFn | null asyncValidator: AsyncValidatorFn | null | 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").
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="middle" [ngModel]="name.middle" maxlength="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', middle: 'J', last: 'Drew'};
onSubmit(f: NgForm) {
console.log(f.value); // {name: {first: 'Nancy', middle: 'J', last: 'Drew'}, email: ''}
console.log(f.valid); // true
}
setValue() {
this.name = {first: 'Bess', middle: 'S', last: 'Marvin'};
}
} | _checkParentType() |
|---|
|
AbstractControlDirective
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v12.angular.io/api/forms/NgModelGroup