[formGroup] directive
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.
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'}); }
}
Interface, extends ControlContainer
submitted
#
submitted: boolean
Reports whether the form submission has been triggered.
directives
#
directives: FormControlName[]
Tracks the list of added FormControlName
instances
form
#
@Input('formGroup') form: FormGroup
Tracks the FormGroup
bound to this directive.
ngSubmit
#
@Output() ngSubmit
Emits an event when the form submission has been triggered.
formDirective
#
get formDirective(): Form
Returns this directive's instance.
control
#
get control(): FormGroup
Returns the FormGroup
bound to this directive.
path
#
get path(): string[]
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.
addControl
#
addControl(dir: FormControlName): FormControl
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.
getControl
#
getControl(dir: FormControlName): FormControl
Retrieves the FormControl
instance from the provided FormControlName
directive
removeControl
#
removeControl(dir: FormControlName): void
Removes the FormControlName
instance from the internal list of directives
addFormGroup
#
addFormGroup(dir: FormGroupName): void
Adds a new FormGroupName
directive instance to the form.
removeFormGroup
#
removeFormGroup(dir: FormGroupName): void
Performs the necessary cleanup when a FormGroupName
directive instance is removed from the
view.
getFormGroup
#
getFormGroup(dir: FormGroupName): FormGroup
Retrieves the FormGroup
for a provided FormGroupName
directive instance
addFormArray
#
addFormArray(dir: FormArrayName): void
Performs the necessary setup when a FormArrayName
directive instance is added to the view.
removeFormArray
#
removeFormArray(dir: FormArrayName): void
Performs the necessary cleanup when a FormArrayName
directive instance is removed from the
view.
getFormArray
#
getFormArray(dir: FormArrayName): FormArray
Retrieves the FormArray
for a provided FormArrayName
directive instance.
updateModel
#
updateModel(dir: FormControlName, value: any): void
Sets the new value for the provided FormControlName
directive.
onSubmit
#
onSubmit($event: Event): boolean
Method called with the "submit" event is triggered on the form.
Triggers the ngSubmit
emitter to emit the "submit" event as its payload.
onReset
#
onReset(): void
Method called when the "reset" event is triggered on the form.
resetForm
#
resetForm(value: any = undefined): void
Resets the form to an initial value and resets its submitted status.