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
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
Class Details
exported from forms/index, defined in forms/src/directives/reactive_directives/form_control_directive.ts