Binds an existing FormGroup
to a DOM element.
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.
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
class FormGroupDirective extends ControlContainer implements Form, constructor(_validators: any[], _asyncValidators: any[]) directives : FormControlName[] form : FormGroup ngSubmit : EventEmitter ngOnChanges(changes: SimpleChanges) : void submitted : boolean formDirective : Form control : FormGroup path : string[] 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) : void }
[formGroup]
ngForm
constructor(_validators: any[], _asyncValidators: any[])
directives : FormControlName[]
form : FormGroup
ngSubmit : EventEmitter
ngOnChanges(changes: SimpleChanges) : void
submitted : boolean
formDirective : Form
control : FormGroup
path : string[]
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) : void
exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_group_directive.ts
© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/api/forms/index/FormGroupDirective-directive.html