W3cubDocs

/Angular 2 TypeScript

FormGroupDirective

Stable Directive

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.

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

npm package: @angular/forms

NgModule: ReactiveFormsModule

Class Overview

class FormGroupDirective extends ControlContainer implements Form, 
  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($event: Event) : 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($event: Event) : boolean
onReset() : void
resetForm(value?: any) : void

exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_group_directive.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v2.angular.io/docs/ts/latest/api/forms/index/FormGroupDirective-directive.html