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 AbstractControl.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
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
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<AsyncValidator|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 forms/index, defined in forms/src/directives/reactive_directives/form_control_name.ts