FormControlDirective

Synchronizes a standalone FormControl instance to a form control element.

See more...

See also

• Reactive Forms Guide

• FormControl

• AbstractControl

Exported from

• ReactiveFormsModule

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
override	Sets the new value for the view model and emits an ngModelChange event.
path: string[]	Read-Only
control: FormControl	Read-Only

Inherited from NgControl

• name: string | number | null
• valueAccessor: ControlValueAccessor | null

Inherited from AbstractControlDirective

• abstract control: AbstractControl | null
• value: any
• valid: boolean | null
• invalid: boolean | null
• pending: boolean | null
• disabled: boolean | null
• enabled: boolean | null
• errors: ValidationErrors | null
• pristine: boolean | null
• dirty: boolean | null
• touched: boolean | null
• status: string | null
• untouched: boolean | null
• statusChanges: Observable<any> | null
• valueChanges: Observable<any> | null
• path: string[] | null
• validator: ValidatorFn | null
• asyncValidator: AsyncValidatorFn | null

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

viewToModelUpdate()
viewToModelUpdate(newValue: any): void Parameters newValue any Returns void

Inherited from NgControl

• abstract viewToModelUpdate(newValue: any): void

Inherited from AbstractControlDirective

• reset(value: any = undefined): void
• hasError(errorCode: string, path?: string | (string | number)[]): boolean
• getError(errorCode: string, path?: string | (string | number)[]): any