FormGroupDirective

Binds an existing FormGroup to a DOM element.

@Directive({ selector: '[formGroup]', providers: [formDirectiveProvider], host: { '(submit)': 'onSubmit($event)', '(reset)': 'onReset()' }, exportAs: 'ngForm' }) class FormGroupDirective extends ControlContainer implements Form, OnChanges { get submitted: boolean directives: FormControlName[] form: FormGroup ngSubmit: new EventEmitter() get formDirective: Form get control: FormGroup get path: string[] ngOnChanges(changes: SimpleChanges): void addControl(dir: FormControlName): FormControl getControl(dir: FormControlName): FormControl removeControl(dir: FormControlName): void addFormGroup(dir: FormGroupName): void removeFormGroup(dir: FormGroupName): void getFormGroup(dir: FormGroupName): FormGroup addFormArray(dir: FormArrayName): void removeFormArray(dir: FormArrayName): void getFormArray(dir: FormArrayName): FormArray updateModel(dir: FormControlName, value: any): void onSubmit($event: Event): boolean onReset(): void resetForm(value: any = undefined): 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 }

选择器

[formGroup]

输入参数

formGroup 绑定到 FormGroupDirective.form

输出参数

ngSubmit 绑定到 FormGroupDirective.ngSubmit

导出为

说明

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.

Set value: You can set the form's initial value when instantiating the FormGroup, or you can set it programmatically later using the FormGroup's setValue or patchValue methods.

Listen to value: If you want to listen to changes in the value of the form, you can subscribe to the FormGroup's valueChanges event. You can also listen to its statusChanges event to be notified when the validation status is re-calculated.

Furthermore, you can listen to the directive's ngSubmit event to be notified when the user has triggered a form submission. The ngSubmit event will be emitted with the original form submission event.

Example

In this example, we create form controls for first name and last name.

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

npm package: @angular/forms

NgModule: ReactiveFormsModule

属性

属性名类型说明
submitted只读
directives
form
ngSubmit
formDirective只读
control只读
path只读

方法

ngOnChanges(changes: SimpleChanges): void

参数

changes

Type: SimpleChanges.

返回值

void

addControl(dir: FormControlName): FormControl

参数

dir

Type: FormControlName.

返回值

FormControl

getControl(dir: FormControlName): FormControl

参数

dir

Type: FormControlName.

返回值

FormControl

removeControl(dir: FormControlName): void

参数

dir

Type: FormControlName.

返回值

void

addFormGroup(dir: FormGroupName): void

参数

dir

Type: FormGroupName.

返回值

void

removeFormGroup(dir: FormGroupName): void

参数

dir

Type: FormGroupName.

返回值

void

getFormGroup(dir: FormGroupName): FormGroup

参数

dir

Type: FormGroupName.

返回值

FormGroup

addFormArray(dir: FormArrayName): void

参数

dir

Type: FormArrayName.

返回值

void

removeFormArray(dir: FormArrayName): void

参数

dir

Type: FormArrayName.

返回值

void

getFormArray(dir: FormArrayName): FormArray

参数

dir

Type: FormArrayName.

返回值

FormArray

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

参数

dir

Type: FormControlName.

value

Type: any.

返回值

void

onSubmit($event: Event): boolean

参数

$event

Type: Event.

返回值

boolean

onReset(): void

参数

没有参数。

返回值

void

resetForm(value: any = undefined): void

参数

value

Type: any.

可选. 默认值是 undefined.

返回值

void