Angular 12 References/ Forms
🍀 Angular References
Oleksa Novyk | GitHub

[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.