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.