FormGroupDirective

See also

• Reactive Forms Guide

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

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