This is the archived documentation for Angular v5. Please visit angular.io to see documentation for the current version of Angular.

FormControlName

npm Package @angular/forms
Module import { FormControlName } from '@angular/forms';
Source forms/src/directives/reactive_directives/form_control_name.ts

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

Overview

      
      @Directive({ selector: '[formControlName]', providers: [controlNameBinding] })
class FormControlName extends NgControl implements OnChanges, OnDestroy {
  get control: FormControl
  name: string
  model: any
  update: new EventEmitter()
  set isDisabled: boolean
  ngOnChanges(changes: SimpleChanges)
  ngOnDestroy(): void
  viewToModelUpdate(newValue: any): void
  get path: string[]
  get formDirective: any
  get validator: ValidatorFn | null
  get asyncValidator: AsyncValidatorFn
  // inherited from forms/NgControl
  name: string | null
  valueAccessor: ControlValueAccessor | null
  get validator: ValidatorFn | null
  get asyncValidator: AsyncValidatorFn | null
  viewToModelUpdate(newValue: any): void
  // inherited from forms/AbstractControlDirective
  get control: AbstractControl | null
  get value: any
  get valid: boolean | null
  get invalid: boolean | null
  get pending: boolean | null
  get disabled: boolean | null
  get enabled: boolean | null
  get errors: ValidationErrors | null
  get pristine: boolean | null
  get dirty: boolean | null
  get touched: boolean | null
  get status: string | null
  get untouched: boolean | null
  get statusChanges: Observable<any> | null
  get valueChanges: Observable<any> | null
  get path: string[] | null
  reset(value: any = undefined): void
  hasError(errorCode: string, path?: string[]): boolean
  getError(errorCode: string, path?: string[]): any
}
    

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 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 setValue or patchValue.

Listen to value: If you want to listen to changes in the value of the control, you can subscribe to the valueChanges event. You can also listen to 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:

npm package: @angular/forms

NgModule: ReactiveFormsModule

Selectors

      
      [formControlName]
    

Inputs

disabled bound to FormControlName.isDisabled

Outputs

ngModelChange bound to FormControlName.update

Constructor

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

Members

      
      get control: FormControl
    

      
      name: string
    

      
      model: any
    

      
      update: new EventEmitter()
    

      
      set isDisabled: boolean
    

      
      ngOnChanges(changes: SimpleChanges)
    

      
      ngOnDestroy(): void
    

      
      viewToModelUpdate(newValue: any): void
    

      
      get path: string[]
    

      
      get formDirective: any
    

      
      get validator: ValidatorFn | null
    

      
      get asyncValidator: AsyncValidatorFn