What it does
Syncs a nested FormGroup
to a DOM element.
How to use
This directive can only be used with a parent FormGroupDirective
(selector:
[formGroup]
).
It accepts the string name of the nested FormGroup
you want to link, and
will look for a FormGroup
registered with that name in the parent
FormGroup
instance you passed into FormGroupDirective
.
Nested form groups can come in handy when you want to validate a sub-group of a form separately from the rest or when you'd like to group the values of certain controls into their own nested object.
Access the group: You can access the associated FormGroup
using the
get
method. Ex: this.form.get('name')
.
You can also access individual controls within the group using dot syntax.
Ex: this.form.get('name.first')
Get the value: the value
property is always synced and available on the
FormGroup
. See a full list of available properties in AbstractControl
.
Set the value: You can set an initial value for each child control when instantiating
the FormGroup
, or you can set it programmatically later using
setValue
or patchValue
.
Listen to value: If you want to listen to changes in the value of the group, you can
subscribe to the valueChanges
event. You can also listen to
statusChanges
to be notified when the validation status is
re-calculated.
Example
npm package:
@angular/forms
NgModule:
ReactiveFormsModule
Class Overview
class FormGroupName extends AbstractFormGroupDirective implements OnInit, OnDestroy {
constructor
(parent: ControlContainer, validators: any[], asyncValidators: any[])
name
: string
}
Selectors
[formGroupName]
Class Description
exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_group_name.ts