NgModelGroup
Creates and binds a FormGroup instance to a DOM element.
NgModule
选择器
属性
| 属性 | 说明 |
|---|---|
@Input('ngModelGroup') | Tracks the name of the |
继承自 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
模板变量参考手册
| 标识符 | 用途 |
|---|---|
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';
@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'};
}
}
