What it does
Binds an existing FormGroup
to a DOM element.
How to use
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.
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
Class Overview
class FormGroupDirective { 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() : boolean onReset() : void resetForm(value?: any) : void }
Selectors
[formGroup]
Exported as
ngForm
Class Description
Constructor
constructor(_validators: any[], _asyncValidators: any[])
Class Details
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() : boolean
onReset() : void
resetForm(value?: any) : void
exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_group_directive.ts
Please login to continue.