W3cubDocs

/Angular 4 TypeScript

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 AbstractControl.setValue or AbstractControl.patchValue.

Listen to value: If you want to listen to changes in the value of the control, you can subscribe to the AbstractControl.valueChanges event. You can also listen to AbstractControl.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<AsyncValidator|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<AsyncValidator|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 forms/index, defined in forms/src/directives/reactive_directives/form_control_directive.ts

© 2010–2017 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/docs/ts/latest/api/forms/index/FormControlDirective-directive.html