Synchronizes a standalone FormControl instance to a form control element.

See more...

See also

Exported from


  • [formControl]


Property Description
@Input('formControl')form: FormControl

Tracks the FormControl instance bound to the directive.

@Input('disabled')isDisabled: boolean Write-Only

Triggers a warning in dev mode that this input should not be used with reactive forms.

@Input('ngModel')model: any

Deprecated as of v6

@Output('ngModelChange')update: EventEmitter

Deprecated as of v6

path: string[] Read-Only

Returns an array that represents the path from the top-level form to this control. Each index is the string name of the control on that level.

control: FormControl Read-Only

The FormControl bound to this directive.

Inherited from NgControl

Inherited from AbstractControlDirective

Template variable references

Identifier Usage
ngForm #myTemplateVar="ngForm"


Note that support for using the ngModel input property and ngModelChange event with reactive form directives was deprecated in Angular v6 and is scheduled for removal in a future version of Angular. For details, see Deprecated features.

The following example shows how to register a standalone control and set its value.

import {Component} from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

  selector: 'example-app',
  template: `
     <input [formControl]="control">

     <p>Value: {{ control.value }}</p>
     <p>Validation status: {{ control.status }}</p>

     <button (click)="setValue()">Set value</button>
export class SimpleFormControl {
  control: FormControl = new FormControl('value', Validators.minLength(2));

  setValue() {
    this.control.setValue('new value');


Sets the new value for the view model and emits an ngModelChange event.

viewToModelUpdate(newValue: any): void

newValue any

The new value for the view model.



Inherited from NgControl

Inherited from AbstractControlDirective

© 2010–2022 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.