FormGroupDirective

Binds an existing FormGroup to a DOM element.

See more...

NgModule

• ReactiveFormsModule

Selectors

• [formGroup]

Properties

Property	Description
submitted: boolean	Read-only.
directives: FormControlName[]
@Input('formGroup')form: FormGroup
@Output()ngSubmit: EventEmitter
formDirective: Form	Read-only.
control: FormGroup	Read-only.
path: string[]	Read-only.

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.

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.

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'}); }
}

Methods

ngOnChanges()
ngOnChanges(changes: SimpleChanges): void Parameters changes Type: SimpleChanges. Returns void

addControl()
addControl(dir: FormControlName): FormControl Parameters dir Type: FormControlName. Returns FormControl

getControl()
getControl(dir: FormControlName): FormControl Parameters dir Type: FormControlName. Returns FormControl

removeControl()
removeControl(dir: FormControlName): void Parameters dir Type: FormControlName. Returns void

addFormGroup()
addFormGroup(dir: FormGroupName): void Parameters dir Type: FormGroupName. Returns void

removeFormGroup()
removeFormGroup(dir: FormGroupName): void Parameters dir Type: FormGroupName. Returns void

getFormGroup()
getFormGroup(dir: FormGroupName): FormGroup Parameters dir Type: FormGroupName. Returns FormGroup

addFormArray()
addFormArray(dir: FormArrayName): void Parameters dir Type: FormArrayName. Returns void

removeFormArray()
removeFormArray(dir: FormArrayName): void Parameters dir Type: FormArrayName. Returns void

getFormArray()
getFormArray(dir: FormArrayName): FormArray Parameters dir Type: FormArrayName. Returns FormArray

updateModel()
updateModel(dir: FormControlName, value: any): void Parameters dir Type: FormControlName. value Type: any. Returns void

onSubmit()
onSubmit($event: Event): boolean Parameters $event Type: Event. Returns boolean

onReset()
onReset(): void Parameters There are no parameters. Returns void

resetForm()
resetForm(value: any = undefined): void Parameters value Type: any. Optional. Default is undefined. Returns void

Inherited from AbstractControlDirective

• reset(value: any = undefined): void
• hasError(errorCode: string, path?: string[]): boolean
• getError(errorCode: string, path?: string[]): any