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