填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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