FormGroupDirective

Binds an existing FormGroup to a DOM element.

查看"说明"...

参见

  • Reactive Forms Guide

  • AbstractControl

    Register Form Group

    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'}); } }
          
          
    1. import {Component} from '@angular/core';
    2. import {FormControl, FormGroup, Validators} from '@angular/forms';
    3.  
    4. @Component({
    5. selector: 'example-app',
    6. template: `
    7. <form [formGroup]="form" (ngSubmit)="onSubmit()">
    8. <div *ngIf="first.invalid"> Name is too short. </div>
    9.  
    10. <input formControlName="first" placeholder="First name">
    11. <input formControlName="last" placeholder="Last name">
    12.  
    13. <button type="submit">Submit</button>
    14. </form>
    15. <button (click)="setValue()">Set preset value</button>
    16. `,
    17. })
    18. export class SimpleFormGroup {
    19. form = new FormGroup({
    20. first: new FormControl('Nancy', Validators.minLength(2)),
    21. last: new FormControl('Drew'),
    22. });
    23.  
    24. get first(): any { return this.form.get('first'); }
    25.  
    26. onSubmit(): void {
    27. console.log(this.form.value); // {first: 'Nancy', last: 'Drew'}
    28. }
    29.  
    30. setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); }
    31. }

NgModule

选择器

  • [formGroup]

属性

属性说明
submitted: boolean 只读

Reports whether the form submission has been triggered.

directives: FormControlName[]

Tracks the list of added FormControlName instances

@Input('formGroup')
form: 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 只读

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"

说明

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.

方法

A lifecycle method called when the directive's inputs change. For internal use only.

ngOnChanges(changes: SimpleChanges): void
      
      ngOnChanges(changes: SimpleChanges): void
    
参数
changes SimpleChanges

A object of key/value pairs for the set of changed inputs.

返回值

void

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
      
      addControl(dir: FormControlName): FormControl
    
参数
dir FormControlName

The FormControlName directive instance.

返回值

FormControl

Retrieves the FormControl instance from the provided FormControlName directive

getControl(dir: FormControlName): FormControl
      
      getControl(dir: FormControlName): FormControl
    
参数
dir FormControlName

The FormControlName directive instance.

返回值

FormControl

Removes the FormControlName instance from the internal list of directives

removeControl(dir: FormControlName): void
      
      removeControl(dir: FormControlName): void
    
参数
dir FormControlName

The FormControlName directive instance.

返回值

void

Adds a new FormGroupName directive instance to the form.

addFormGroup(dir: FormGroupName): void
      
      addFormGroup(dir: FormGroupName): void
    
参数
dir FormGroupName

The FormGroupName directive instance.

返回值

void

No-op method to remove the form group.

removeFormGroup(dir: FormGroupName): void
      
      removeFormGroup(dir: FormGroupName): void
    
参数
dir FormGroupName

The FormGroupName directive instance.

返回值

void

Retrieves the FormGroup for a provided FormGroupName directive instance

getFormGroup(dir: FormGroupName): FormGroup
      
      getFormGroup(dir: FormGroupName): FormGroup
    
参数
dir FormGroupName

The FormGroupName directive instance.

返回值

FormGroup

Adds a new FormArrayName directive instance to the form.

addFormArray(dir: FormArrayName): void
      
      addFormArray(dir: FormArrayName): void
    
参数
dir FormArrayName

The FormArrayName directive instance.

返回值

void

No-op method to remove the form array.

removeFormArray(dir: FormArrayName): void
      
      removeFormArray(dir: FormArrayName): void
    
参数
dir FormArrayName

The FormArrayName directive instance.

返回值

void

Retrieves the FormArray for a provided FormArrayName directive instance.

getFormArray(dir: FormArrayName): FormArray
      
      getFormArray(dir: FormArrayName): FormArray
    
参数
dir FormArrayName

The FormArrayName directive instance.

返回值

FormArray

Sets the new value for the provided FormControlName directive.

updateModel(dir: FormControlName, value: any): void
      
      updateModel(dir: FormControlName, value: any): void
    
参数
dir FormControlName

The FormControlName directive instance.

value any

The new value for the directive's control.

返回值

void

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
      
      onSubmit($event: Event): boolean
    
参数
$event Event

The "submit" event object

返回值

boolean

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

onReset(): void
      
      onReset(): void
    
参数

没有参数。

返回值

void

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

resetForm(value: any = undefined): void
      
      resetForm(value: any = undefined): void
    
参数
value any

可选. 默认值是 undefined.

The new value for the form.

返回值

void

继承自 AbstractControlDirective