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.
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.
npm package: @angular/forms
NgModule: ReactiveFormsModule
Class Overview
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
}
Selectors
[formGroup]
Exported as
ngForm
Class Description
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($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