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).
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.
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 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 }
[formControl]
ngForm
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
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