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 { 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
Please login to continue.