FormControlDirective

Stable Directive

What it does

Syncs a standalone FormControl instance to a form control element.

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

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

Class Overview

class FormControlDirective extends NgControl implements OnChanges {
  constructor(validators: Array<Validator|ValidatorFn>, asyncValidators: Array<Validator|AsyncValidatorFn>, valueAccessors: ControlValueAccessor[])
  
  
  viewModel : any
  form : FormControl
  model : any
  update : EventEmitter
  isDisabled 
  ngOnChanges(changes: SimpleChanges) : void
  path : string[]
  validator : ValidatorFn
  asyncValidator : AsyncValidatorFn
  control : FormControl
  viewToModelUpdate(newValue: any) : void
}

Selectors

[formControl]

Exported as

ngForm

Class Description

Constructor

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

Class Details

viewModel : any

form : FormControl

model : any

update : EventEmitter

isDisabled

ngOnChanges(changes: SimpleChanges) : void

path : string[]

validator : ValidatorFn

asyncValidator : AsyncValidatorFn

control : FormControl

viewToModelUpdate(newValue: any) : void

exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_control_directive.ts