FormControlName

What it does

Syncs a FormControl in an existing FormGroup to a form control element by name.

In other words, this directive ensures that any values written to the FormControl instance programmatically will be written to the DOM element (model -> view). Conversely, any values written to the DOM element through user input will be reflected in the FormControl instance (view -> model).

How to use

This directive is designed to be used with a parent FormGroupDirective (selector: [formGroup]).

It accepts the string name of the FormControl instance you want to link, and will look for a FormControl registered with that name in the closest FormGroup or FormArray above it.

Access the control: You can access the FormControl associated with this directive by using the AbstractControl.get method. Ex: this.form.get('first');

Get value: the value property is always synced and available on the FormControl. See a full list of available properties in AbstractControl.

Set value: You can set an initial value for the control when instantiating the FormControl, or you can set it programmatically later using AbstractControl.setValue or AbstractControl.patchValue.

Listen to value: If you want to listen to changes in the value of the control, you can subscribe to the AbstractControl.valueChanges event. You can also listen to AbstractControl.statusChanges to be notified when the validation status is re-calculated.

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

To see formControlName examples with different form control types, see:

• Radio buttons: RadioControlValueAccessor
• Selects: SelectControlValueAccessor

npm package: @angular/forms

NgModule: ReactiveFormsModule

Selectors

[formControlName]

Class Description

Constructor

constructor(parent: ControlContainer, validators: Array<Validator|ValidatorFn>, asyncValidators:
          Array<AsyncValidator|AsyncValidatorFn>, valueAccessors: ControlValueAccessor[])