模板语法
服务端渲染
API / @angular/forms

NgModelGroup

Creates and binds a FormGroup instance to a DOM element.

@Directive({ selector: '[ngModelGroup]', providers: [modelGroupProvider], exportAs: 'ngModelGroup' }) class NgModelGroup extends AbstractFormGroupDirective implements OnInit, OnDestroy { name: string // 继承自 forms/AbstractFormGroupDirective get control: FormGroup get path: string[] get formDirective: Form | null get validator: ValidatorFn | null get asyncValidator: AsyncValidatorFn | null ngOnInit(): void ngOnDestroy(): void // 继承自 forms/ControlContainer name: string get formDirective: Form | null get path: string[] | null // 继承自 forms/AbstractControlDirective abstract 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 }

选择器

[ngModelGroup]

输入参数

ngModelGroup 绑定到 NgModelGroup.name

导出为

说明

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'}; } }

属性

属性名类型说明
name