@angular/forms

FormGroupDirective

directive

stable

Binds an existing FormGroup or FormRecord to a DOM element.

API

  
    class FormGroupDirective extends ControlContainer implements Form ,OnChanges ,OnDestroy {}

constructor

FormGroupDirective

@paramvalidators(Validator | ValidatorFn)[]

@paramasyncValidators(AsyncValidatorFn | AsyncValidator)[]

@paramcallSetDisabledStateSetDisabledStateOption | undefined

@returnsFormGroupDirective

submitted

boolean

Reports whether the form submission has been triggered.

directives

FormControlName[]

Tracks the list of added FormControlName instances

form

FormGroup<any>

Tracks the FormGroup bound to this directive.

ngSubmit

EventEmitter<any>

Emits an event when the form submission has been triggered.

formDirective

Form

Returns this directive's instance.

control

FormGroup<any>

Returns the FormGroup bound to this directive.

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

FormControl<any>

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.

@paramdirFormControlName

The FormControlName directive instance.

@returnsFormControl<any>

getControl

FormControl<any>

Retrieves the FormControl instance from the provided FormControlName directive

@paramdirFormControlName

The FormControlName directive instance.

@returnsFormControl<any>

removeControl

void

Removes the FormControlName instance from the internal list of directives

@paramdirFormControlName

The FormControlName directive instance.

@returnsvoid

addFormGroup

void

Adds a new FormGroupName directive instance to the form.

@paramdirFormGroupName

The FormGroupName directive instance.

@returnsvoid

removeFormGroup

void

Performs the necessary cleanup when a FormGroupName directive instance is removed from the view.

@paramdirFormGroupName

The FormGroupName directive instance.

@returnsvoid

getFormGroup

FormGroup<any>

Retrieves the FormGroup for a provided FormGroupName directive instance

@paramdirFormGroupName

The FormGroupName directive instance.

@returnsFormGroup<any>

addFormArray

void

Performs the necessary setup when a FormArrayName directive instance is added to the view.

@paramdirFormArrayName

The FormArrayName directive instance.

@returnsvoid

removeFormArray

void

Performs the necessary cleanup when a FormArrayName directive instance is removed from the view.

@paramdirFormArrayName

The FormArrayName directive instance.

@returnsvoid

getFormArray

FormArray<any>

Retrieves the FormArray for a provided FormArrayName directive instance.

@paramdirFormArrayName

The FormArrayName directive instance.

@returnsFormArray<any>

updateModel

void

Sets the new value for the provided FormControlName directive.

@paramdirFormControlName

The FormControlName directive instance.

@paramvalueany

The new value for the directive's control.

@returnsvoid

onSubmit

boolean

Method called with the "submit" event is triggered on the form. Triggers the ngSubmit emitter to emit the "submit" event as its payload.

@param$eventEvent

The "submit" event object

@returnsboolean

onReset

void

Method called when the "reset" event is triggered on the form.

@returnsvoid

resetForm

void

Resets the form to an initial value and resets its submitted status.

@paramvalueany

The new value for the form, undefined by default

@paramoptions{ onlySelf?: boolean | undefined; emitEvent?: boolean | undefined; }

@returnsvoid

name

string | number | null

The name for the control

value

any

Reports the value of the control if it is present, otherwise null.

valid

boolean | null

Reports whether the control is valid. A control is considered valid if no validation errors exist with the current value. If the control is not present, null is returned.

invalid

boolean | null

Reports whether the control is invalid, meaning that an error exists in the input value. If the control is not present, null is returned.

pending

boolean | null

Reports whether a control is pending, meaning that async validation is occurring and errors are not yet available for the input value. If the control is not present, null is returned.

disabled

boolean | null

Reports whether the control is disabled, meaning that the control is disabled in the UI and is exempt from validation checks and excluded from aggregate values of ancestor controls. If the control is not present, null is returned.

enabled

boolean | null

Reports whether the control is enabled, meaning that the control is included in ancestor calculations of validity or value. If the control is not present, null is returned.

errors

ValidationErrors | null

Reports the control's validation errors. If the control is not present, null is returned.

pristine

boolean | null

Reports whether the control is pristine, meaning that the user has not yet changed the value in the UI. If the control is not present, null is returned.

dirty

boolean | null

Reports whether the control is dirty, meaning that the user has changed the value in the UI. If the control is not present, null is returned.

touched

boolean | null

Reports whether the control is touched, meaning that the user has triggered a blur event on it. If the control is not present, null is returned.

status

string | null

Reports the validation status of the control. Possible values include: 'VALID', 'INVALID', 'DISABLED', and 'PENDING'. If the control is not present, null is returned.

untouched

boolean | null

Reports whether the control is untouched, meaning that the user has not yet triggered a blur event on it. If the control is not present, null is returned.

statusChanges

any

Returns a multicasting observable that emits a validation status whenever it is calculated for the control. If the control is not present, null is returned.

valueChanges

any

Returns a multicasting observable of value changes for the control that emits every time the value of the control changes in the UI or programmatically. If the control is not present, null is returned.

validator

ValidatorFn | null

Synchronous validator function composed of all the synchronous validators registered with this directive.

asyncValidator

AsyncValidatorFn | null

Asynchronous validator function composed of all the asynchronous validators registered with this directive.

reset

void

Resets the control with the provided value if the control is present.

@paramvalueany

@returnsvoid

hasError

boolean

Reports whether the control with the given path has the error specified.

@paramerrorCodestring

The code of the error to check

@parampathstring | (string | number)[] | undefined

A list of control names that designates how to move from the current control to the control that should be queried for errors.

@returnsboolean

Usage notes

For example, for the following FormGroup:

form = new FormGroup({  address: new FormGroup({ street: new FormControl() })});

The path to the 'street' control from the root form would be 'address' -> 'street'.

It can be provided to this method in one of two formats:

An array of string control names, e.g. ['address', 'street']
A period-delimited list of control names in one string, e.g. 'address.street'

If no path is given, this method checks for the error on the current control.

getError

any

Reports error data for the control with the given path.

@paramerrorCodestring

The code of the error to check

@parampathstring | (string | number)[] | undefined

A list of control names that designates how to move from the current control to the control that should be queried for errors.

@returnsany

Usage notes

For example, for the following FormGroup:

form = new FormGroup({  address: new FormGroup({ street: new FormControl() })});

The path to the 'street' control from the root form would be 'address' -> 'street'.

It can be provided to this method in one of two formats:

An array of string control names, e.g. ['address', 'street']
A period-delimited list of control names in one string, e.g. 'address.street'

Description

Binds an existing FormGroup or FormRecord to a DOM element.

This directive accepts an existing FormGroup instance. It will then use this FormGroup instance to match any child FormControl, FormGroup/FormRecord, and FormArray instances to child FormControlName, FormGroupName, and FormArrayName directives.

Exported by

ReactiveFormsModule

Usage Notes

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()">      @if(first.invalid) {        <div>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>  `,  standalone: false,})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'});  }}