Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

FormControlDirective

Synchronizes a standalone FormControl instance to a form control element.

See more...

See also

Exported from

Selectors

  • [formControl]

Properties

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"

Description

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

@Component({
  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');
  }
}
    

Methods

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

      
      viewToModelUpdate(newValue: any): void
    
Parameters
newValue any

The new value for the view model.

Returns

void

Inherited from NgControl

Inherited from AbstractControlDirective