填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/forms

NgModelGroup

创建 FormGroup 的实例并将其绑定到 DOM 元素。

Creates and binds a FormGroup instance to a DOM element.

查看"说明"...

Exported from

选择器

属性

属性说明
@Input('ngModelGroup')
name: string

跟踪绑定到指令 NgModelGroup 的名称。该名称对应于父 NgForm 中的键名。

Tracks the name of the NgModelGroup bound to the directive. The name corresponds to a key in the parent NgForm.

继承自 AbstractFormGroupDirective

继承自 ControlContainer

继承自 AbstractControlDirective

模板变量参考手册

标识符用途
ngModelGroup#myTemplateVar="ngModelGroup"

说明

此指令只能用作 NgForm 的子级（在 <form> 标记内）。

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.

为子组提供一个名称，它将成为表单完整值中子组的关键字。如果你需要直接访问它，可以使用 ngModelGroup（例如：#myGroup="ngModelGroup" ）来把此指令导出到本地模板变量中。

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

继承自 AbstractControlDirective