A theoretical structure of space-time envisioned as a tunnel connecting points that are separated in space and time.
Implement this interface to create a custom form control directive that integrates with Angular forms.
How do I use it?
I have created custom components that I would like to act as form elements in my reactive form.
Our Reactive Form
parent component w/ form
Classes implementing interfaces must follow the structure described by the interface.
Writes a new value to the element. This will be called when the FormControl is instantiated AND when patchValue or setValue is called.
Registers a callback function that is called when
the control's value changes in the UI.
Registers a callback function is called by the forms
API on initialization to update the form model on blur.
set Disabled State
Function that is called by the forms API when the control status changes to or from 'DISABLED'. This will be called when the FormControl is instantiated IF the disabled key is present AND when .enable() or .disable() is called.
We need to register the NG_VALUE_ACCESSOR provider and implement the ControlValueAccessor methods.
The NG_VALUE_ACCESSOR is used to register the component as a provider for the controlValueAccessor, and because this will register the component early we'll need to use forwardRef to refer to it.
Basic CVA implementation
In form markup
same as ...
Using CVA in practice for typeahead and rating form controls
We want to display the 'name' value to our users and submit the 'id' value to our form
(using ngx-bootstrap typeahead)
Star Rating Markup
Star Rating Component
Things we care about:
Test Setup - Creating a test host component & using ViewChild
Testing Typeahead Change Event
We care that the formControl is being notified of the change when an option is selected.
Testing Touch Event (& validation)
We care that the formControl element is getting the ng-touched class and touched property true.
We care that the ui selects the appropriate dropdown when writeValue is called.
Testing Rating Change Event
We care that the formControl is being notified of the change when a star is clicked.
Testing Rating Disabling
We care that component implements "disabled" functionality correctly.
Slides available at: tehfedaykin.github.io/WormholesandCVAs
Galaxy Rating App: https://github.com/tehfedaykin/galaxy-rating-app
VS Code theme - SynthWave '84 by Robb Owen