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

FormGroupDirective

將現有的 FormGroup 繫結到 DOM 元素。

Binds an existing FormGroup to a DOM element.

檢視"說明"...

參見

Exported from

選擇器

  • [formGroup]

屬性

屬性說明
submitted: boolean唯讀

報告是否已觸發表單提交。

Reports whether the form submission has been triggered.

directives: FormControlName[]

追蹤已新增的 FormControlName 實例的列表

Tracks the list of added FormControlName instances

@Input('formGroup')
form: FormGroup

追蹤繫結到此指令的 FormGroup

Tracks the FormGroup bound to this directive.

@Output()
ngSubmit: EventEmitter

觸發表單提交後,發出事件。

Emits an event when the form submission has been triggered.

formDirective: Form唯讀

返回此指令的實例。

Returns this directive's instance.

control: FormGroup唯讀

返回繫結到該指令的 FormGroup

Returns the FormGroup bound to this directive.

path: string[]唯讀

返回表示該表單組的路徑的陣列。由於此指令始終位於表單的最上層,因此它始終為空陣列。

Returns an array representing the path to this group. Because this directive always lives at the top level of a form, it always an empty array.

繼承自 ControlContainer

繼承自 AbstractControlDirective

範本變數參考手冊

識別符號用途
ngForm#myTemplateVar="ngForm"

說明

該指令接受現有的 FormGroup 實例。然後,它將使用此 FormGroup 實例中的任何子控制元件 FormControlFormGroupFormArray 的實例與其子指令 FormControlNameFormGroupNameFormArrayName 匹配。

This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.

登錄檔單組

Register Form Group

下面的示例使用名字和姓氏控制元件 FormGroup ,並在單擊按鈕時偵聽 ngSubmit 事件。

The following example registers a FormGroup with first name and last name controls, and listens for the ngSubmit event when the button is clicked.

      
      import {Component} from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div *ngIf="first.invalid"> Name is too short. </div>

      <input formControlName="first" placeholder="First name">
      <input formControlName="last" placeholder="Last name">

      <button type="submit">Submit</button>
   </form>
   <button (click)="setValue()">Set preset value</button>
  `,
})
export class SimpleFormGroup {
  form = new FormGroup({
    first: new FormControl('Nancy', Validators.minLength(2)),
    last: new FormControl('Drew'),
  });

  get first(): any {
    return this.form.get('first');
  }

  onSubmit(): void {
    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
  }

  setValue() {
    this.form.setValue({first: 'Carson', last: 'Drew'});
  }
}
    

方法

在該組中設定控制元件指令,重新計算其值和有效性並將該實例新增到內部指令列表的方法。

Method that sets up the control directive in this group, re-calculates its value and validity, and adds the instance to the internal list of directives.

      
      addControl(dir: FormControlName): FormControl
    
引數
dir FormControlName

FormControlName 指令實例。

The FormControlName directive instance.

返回值

FormControl

從給定 FormControlName 指令中檢索 FormControl

Retrieves the FormControl instance from the provided FormControlName directive

      
      getControl(dir: FormControlName): FormControl
    
引數
dir FormControlName

FormControlName 指令實例。

The FormControlName directive instance.

返回值

FormControl

從內部指令列表中刪除此 FormControlName 實例

Removes the FormControlName instance from the internal list of directives

      
      removeControl(dir: FormControlName): void
    
引數
dir FormControlName

FormControlName 指令實例。

The FormControlName directive instance.

返回值

void

將新的 FormGroupName 指令實例新增到表單。

Adds a new FormGroupName directive instance to the form.

      
      addFormGroup(dir: FormGroupName): void
    
引數
dir FormGroupName

FormGroupName 指令實例。

The FormGroupName directive instance.

返回值

void

用於刪除表單組的空白方法。

Performs the necessary cleanup when a FormGroupName directive instance is removed from the view.

      
      removeFormGroup(dir: FormGroupName): void
    
引數
dir FormGroupName

FormGroupName 指令實例。

The FormGroupName directive instance.

返回值

void

檢索給定 FormGroupName 指令實例的 FormGroup

Retrieves the FormGroup for a provided FormGroupName directive instance

      
      getFormGroup(dir: FormGroupName): FormGroup
    
引數
dir FormGroupName

FormGroupName 指令實例。

The FormGroupName directive instance.

返回值

FormGroup

向表單新增一個新的 FormArrayName 指令實例。

Performs the necessary setup when a FormArrayName directive instance is added to the view.

      
      addFormArray(dir: FormArrayName): void
    
引數
dir FormArrayName

FormArrayName 指令實例。

The FormArrayName directive instance.

返回值

void

用於刪除表單組的空白方法。

Performs the necessary cleanup when a FormArrayName directive instance is removed from the view.

      
      removeFormArray(dir: FormArrayName): void
    
引數
dir FormArrayName

FormArrayName 指令實例。

The FormArrayName directive instance.

返回值

void

檢索給定 FormArrayName 指令實例的 FormArray

Retrieves the FormArray for a provided FormArrayName directive instance.

      
      getFormArray(dir: FormArrayName): FormArray
    
引數
dir FormArrayName

FormArrayName 指令實例。

The FormArrayName directive instance.

返回值

FormArray

為給定 FormControlName 指令設定新值。

Sets the new value for the provided FormControlName directive.

      
      updateModel(dir: FormControlName, value: any): void
    
引數
dir FormControlName

FormControlName 指令實例。

The FormControlName directive instance.

value any

指令控制元件的新值。

The new value for the directive's control.

返回值

void

當表單上觸發了 “submit” 事件時要呼叫的方法。觸發帶有 “submit” 事件的 ngSubmit

Method called with the "submit" event is triggered on the form. Triggers the ngSubmit emitter to emit the "submit" event as its payload.

      
      onSubmit($event: Event): boolean
    
引數
$event Event

"submit" 事件物件

The "submit" event object

返回值

boolean

在表單上觸發“reset”事件時呼叫的方法。

Method called when the "reset" event is triggered on the form.

      
      onReset(): void
    
引數

沒有引數。

返回值

void

將表單重置為初始值並重置其提交狀態。

Resets the form to an initial value and resets its submitted status.

      
      resetForm(value: any = undefined): void
    
引數
value any

表單的新值。

The new value for the form.

可選. 預設值是 `undefined`.
返回值

void

繼承自 AbstractControlDirective