FormGroupDirective
directive
Binds an existing FormGroup
to a DOM element.
See also
AbstractControl
Register Form Group
The following example registers a
FormGroup
with first name and last name controls, and listens for the ngSubmit event when the button is clicked.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'}); } }
NgModule
-
ReactiveFormsModule
Selectors
[formGroup]
Properties
Property | Description |
---|---|
submitted: boolean
|
Read-Only Reports whether the form submission has been triggered. |
directives: FormControlName[]
|
Tracks the list of added FormControlName instances
|
@Input('formGroup')form: FormGroup
|
Tracks the FormGroup bound to this directive.
|
@Output()ngSubmit: EventEmitter
|
Emits an event when the form submission has been triggered. |
formDirective: Form
|
Read-Only Returns this directive's instance. |
control: FormGroup
|
Read-Only
Returns the |
path: string[]
|
Read-Only Returns an array representing the path to this group. Because this directive always lives at the top level of a form, it always an empty array. |
Inherited from ControlContainer
name: string
formDirective: Form | null
path: string[] | null
Inherited from AbstractControlDirective
abstract control: AbstractControl | null
value: any
valid: boolean | null
invalid: boolean | null
pending: boolean | null
disabled: boolean | null
enabled: boolean | null
errors: ValidationErrors | null
pristine: boolean | null
dirty: boolean | null
touched: boolean | null
status: string | null
untouched: boolean | null
statusChanges: Observable<any> | null
valueChanges: Observable<any> | null
path: string[] | null
Template variable references
Identifier | Usage |
---|---|
ngForm
|
#myTemplateVar="ngForm"
|
Description
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.
Methods
ngOnChanges() | |||
---|---|---|---|
A lifecycle method called when the directive's inputs change. For internal use only. | |||
ngOnChanges(changes: SimpleChanges): voidParameters
Returns
|
addControl() | |||
---|---|---|---|
Method that sets up the control directive in this group, re-calculates its value and validity, and adds the instance to the internal list of directives. | |||
addControl(dir: FormControlName): FormControlParameters
Returns
|
getControl() | |||
---|---|---|---|
Retrieves the FormControl instance from the provided FormControlName directive
| |||
getControl(dir: FormControlName): FormControlParameters
Returns
|
removeControl() | |||
---|---|---|---|
Removes the FormControlName instance from the internal list of directives
| |||
removeControl(dir: FormControlName): voidParameters
Returns
|
addFormGroup() | |||
---|---|---|---|
Adds a new FormGroupName directive instance to the form.
| |||
addFormGroup(dir: FormGroupName): voidParameters
Returns
|
removeFormGroup() | |||
---|---|---|---|
No-op method to remove the form group. | |||
removeFormGroup(dir: FormGroupName): voidParameters
Returns
|
getFormGroup() | |||
---|---|---|---|
Retrieves the FormGroup for a provided FormGroupName directive instance
| |||
getFormGroup(dir: FormGroupName): FormGroupParameters
Returns
|
addFormArray() | |||
---|---|---|---|
Adds a new FormArrayName directive instance to the form.
| |||
addFormArray(dir: FormArrayName): voidParameters
Returns
|
removeFormArray() | |||
---|---|---|---|
No-op method to remove the form array. | |||
removeFormArray(dir: FormArrayName): voidParameters
Returns
|
getFormArray() | |||
---|---|---|---|
Retrieves the FormArray for a provided FormArrayName directive instance.
| |||
getFormArray(dir: FormArrayName): FormArrayParameters
Returns
|
updateModel() | ||||||
---|---|---|---|---|---|---|
Sets the new value for the provided FormControlName directive.
| ||||||
updateModel(dir: FormControlName, value: any): voidParameters
Returns
|
onSubmit() | |||
---|---|---|---|
Method called with the "submit" event is triggered on the form. Triggers the ngSubmit emitter to emit the "submit" event as its payload.
| |||
onSubmit($event: Event): booleanParameters
Returns
|
onReset() |
---|
Method called when the "reset" event is triggered on the form. |
onReset(): voidParametersThere are no parameters. Returns
|
resetForm() | |||
---|---|---|---|
Resets the form to an initial value and resets its submitted status. | |||
resetForm(value: any = undefined): voidParameters
Returns
|
Inherited from AbstractControlDirective
reset(value: any = undefined): void
hasError(errorCode: string, path?: string | (string | number)[]): boolean
getError(errorCode: string, path?: string | (string | number)[]): any
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v8.angular.io/api/forms/FormGroupDirective