What it does
Syncs a FormControl
in an existing FormGroup
to a form control
element by name.
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
This directive is designed to be used with a parent FormGroupDirective
(selector:
[formGroup]
).
It accepts the string name of the FormControl
instance you want to
link, and will look for a FormControl
registered with that name in the
closest FormGroup
or FormArray
above it.
Access the control: You can access the FormControl
associated with
this directive by using the get
method.
Ex: this.form.get('first');
Get value: the value
property is always synced and available on the FormControl
.
See a full list of available properties in AbstractControl
.
Set value: You can set an initial value for the control 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
In this example, we create form controls for first name and last name.
To see formControlName
examples with different form control types, see:
- Radio buttons:
RadioControlValueAccessor
- Selects:
SelectControlValueAccessor
npm package: @angular/forms
NgModule: ReactiveFormsModule
Class Overview
class FormControlName extends NgControl implements OnChanges, OnDestroy {
constructor
(parent: ControlContainer, validators: Array<Validator|ValidatorFn>, asyncValidators: Array<Validator|AsyncValidatorFn>, valueAccessors: ControlValueAccessor[])
name
: string
model
: any
update
: EventEmitter
isDisabled
ngOnChanges
(changes: SimpleChanges)
ngOnDestroy
() : void
viewToModelUpdate
(newValue: any) : void
path
: string[]
formDirective
: any
validator
: ValidatorFn
asyncValidator
: AsyncValidatorFn
control
: FormControl
}
Selectors
[formControlName]
Class Description
Constructor
Class Details
exported from @angular/forms/index, defined in @angular/forms/src/directives/reactive_directives/form_control_name.ts