FormControlDirective

directive

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

Overview

@Directive({ selector: '[formControl]', providers: [formControlBinding], exportAs: 'ngForm' })
class FormControlDirective extends NgControl implements OnChanges {
  viewModel: any
  form: FormControl
  model: any
  update: new EventEmitter()
  set isDisabled: boolean
  ngOnChanges(changes: SimpleChanges): void
  get path: string[]
  get validator: ValidatorFn | null
  get asyncValidator: AsyncValidatorFn | null
  get control: FormControl
  viewToModelUpdate(newValue: any): void
  // 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

Use this directive if you'd like to create and manage a FormControl instance directly. Simply create a FormControl, save it to your component class, and pass it into the FormControlDirective.

This directive is designed to be used as a standalone control. Unlike FormControlName, it does not require that your FormControl instance be part of any parent FormGroup, and it won't be registered to any FormGroupDirective that exists above it.

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

Set the value: You can pass in an initial value 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

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

• npm package: @angular/forms

• NgModule: ReactiveFormsModule

Selectors

[formControl]

Inputs

Outputs

Exported as

Constructor

Members

viewModel: any

form: FormControl

model: any

update: new EventEmitter()

set isDisabled: boolean

ngOnChanges(changes: SimpleChanges): void

get path: string[]

get validator: ValidatorFn | null

get asyncValidator: AsyncValidatorFn | null

get control: FormControl

viewToModelUpdate(newValue: any): void