Angular 10 References/ Forms
References

[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
No-op method to remove the form group.

getFormGroup#

getFormGroup(dir: FormGroupName): FormGroup
Retrieves the `FormGroup` for a provided `FormGroupName` directive instance

addFormArray#

addFormArray(dir: FormArrayName): void
Adds a new `FormArrayName` directive instance to the form.

removeFormArray#

removeFormArray(dir: FormArrayName): void
No-op method to remove the form array.

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.