The Control Value Accessor | Jennifer Wadella

[Music] [Music] so wormholes a theoretical structure of space-time and vision is a tunnel connecting two points that are separated by space and time so this is theoretical but this is kind of envisioned like this where we've got space-time being folded and the wormhole is connected by two points typically what we consider a black hole which we now actually have images of which is super exciting right yeah I let's give it up for the scientists the problem with wormholes however is they can have some unexpected side effects that were not a fan of okay but the control value access or fortunately does not have any side effects that I'm aware of it has not produced a demo gorgon as far as I have been using it so I think we're safe okay but the control value access er actually defines an interface that acts as a bridge between angular forms API and a native element than Dom what does that mean we can do a couple really really powerful things with this to solve form problems most specifically we can implement an interface to create a custom form control that integrates really nicely with angular forms so if we envision our wormhole like this we've got our control value accessor which is passing information in between a custom directive or a control that we have created and in the parent form that is it is a part of and if you're not familiar with forms as much and some of these terms will go through that so how do we actually begin to use the control value access or to make some really awesome powerful things happen to demonstrate this we are going to build a sample application and so I will sorry they kind of did something weird with my setup where is my sorry about this we'll just use the gift for now but what we're gonna be doing is creating a sample application and we're gonna have a couple different custom components that we have first of all we've got a type a head that we're gonna be able to select a galaxy from and then we're going to have some sort of star rating system where we can rate how awesome we think this galaxy is and then we will save our name to let people know what we think about this galaxy so to really kind of illustrate what we're gonna be doing here we're gonna have these custom components that act as form elements in our reactive form we're gonna have again our type-ahead component and what we're gonna be doing is displaying one value to the user but what we really care about is the ID for whatever that galaxy is and that's one of what we want to be passing as our form value and then for our star reading component very similarly we're gonna have something displaying in the UI but all we really care about is again submitting some sort of rating number to our form as its value so reactive forms crash course is everybody on the reactive forms training here okay I'll get the rest of you on board reactive form is a model driven approach to handling form inputs whose values change over time so this can be a much cleaner way to implement forms that can get really messy when we start to nest in and create dynamic components inside the form control is our basic building blocks so you can think of this is a basic input element that you would have you have some sort of form control representation for that and this is going to track the value of whatever that form is and the validation status as well a form group is a group of form controls so if you have some sort of object structure that you need to submit your values in we can use a form group made of form controls that will handle that for us and then the form control name is a directive that I tend to use that is going to tie a form element to a form control there's also just the form control directive and I'll show both of those in this so when we look at creating our reactive form for our sample application this is what that's gonna look like we're gonna have a main form group and then we just have three different form controls our galaxy form control our rating form control and our name form control a couple things we care about we want our rating form control to be disabled by default and so that's kind of a common situation you might run into with forms when they're dependent on different values and figuring out how to have that happen so in our form we don't want our ratings to be enabled until our type-ahead drop-down actually has a value in it so when we begin to build out our form this is what that markup is going to look like we will be tying our galaxy form via the forum group control and then I've got a couple of custom components in here that I have already created so you can see that gr type-ahead gr standing for galaxy rating as well as my gr star rater and then I'm going ahead and I'm passing in an array of galaxies for our data that we're gonna put in that type-ahead to populate and you might be thinking okay well Jennifer I I can solve this problem already this is not that big of a deal I'm going to wire up my custom component when a user interacts with it I'm gonna emit a change event it'll be awesome in my pony I'll go ahead and I'll use like my change listener I'll push that value to the form using set value or patch value it'll be fine like I don't need your control value sir oh but you do okay so there are a couple pitfalls with this solution but when we edge all the methods for looking and to amend chairs this is a pretty common pattern in angular but it's not one we need to be implementing for building custom form controls having to have that initial additional method of patch value on our form control every time we're getting a change from somewhere else can be really messy to deal with and how would we even begin to figure out how to deal with a validation for this okay so let's take a look at the control value access err to this and first we need to understand that the control value access or is an interface and it's got a couple methods on it that are required with typescript we know that interfaces have to have all their methods or properties implemented as long as they were required so if you're beginning to implement the control VI access or interface you are gonna get errors with your typescript compiler until you have all the methods implemented appropriately so walking through these methods let's see what's going on first of all we have the right value and this is going to write the value to the element and so this is really important for understanding where our value is coming from this is going to be called in two different instances this is going to be called it first when the form is instantiated and then again if patch value or set value is called to update this form control so if we look at this and kind of our our wormhole diagram that we're referring back to we've got our our component that is implementing the control value access or interface and it might be displaying whatever the value is like let's say we're doing a name input and my name is Jennifer that's what's in the value that's what we want to display in our UI so the way the component implementing the control value access or interface is going to get that is when we are either calling our new form control and passing in a value of Jennifer or if we are using patch value or set value to actually modify the content of that form control so it's important to understand how you're actually getting these values through the next method we need to care about is register on change and so this is something that we need to control to let our our parent form know that our form control value has changed so if we've already implemented and the user makes some sort of selection they changed the name from let's say Jennifer to ELISA we want to be able to communicate that to our parent form and so that's going to look like this where we've got our component we've fired this on change event with some sort of new value the control value access or our wormhole is getting that value and then for instance if we are subscribing to value changes on that form control name we are going to get that new value of ELISA so that's how we're starting to pass the information back and forth mm-hmm all right register untouched is our next one and this is very similar to unchanged we want to let a form control know when it has been and interacted with a lot of times we'll use this for validation so if a user is interacting with a form and there's a required field and they touch it but don't fill in any information we might want a way to show the user that hey they do need to require or they do need to fill out this form so that is what we're going to call on a blur function and so when you're implementing this custom component and your user interacts with your element and has some sort of blur where they don't necessarily update information but they've touched or interacted with it that's when we want to call our on touch method which is going to send that touched this is going to set our form control touch to value to true as well as add the class ng touched so if you're not familiar with angular validation and the way it adds all its different classes we can easily hook into those by making sure that the validation status and the touch status and the dirty status are updated properly and finally we have set disabled State and you'll notice that this is an optional function so you do not need to implement it but this is going to be called to track the disabled state of a form so this will be called either when a form control is instantiated with a disabled or a disabled key that is true or false or when you actually call dot enable or disable on the form element so back to our diagram here we've got our component we're doing something with our set disabled State maybe we're making changes to our UI that we're displaying to let the user know that this component is disabled so we need to be able to get that information when the form is actually disabled okay let's look at actually what implementation for the control value access or looks like so you all can begin to use this so we're going to have to use the energy value access err to register this component as a provider for the control value accessor and this is going to register the component early so we need to use forward rough to refer to it so this is what your basic structure is gonna look like you'll notice I do not have control value access or implemented yet or any of the methods this is just some of our setup code and then when we do have it implemented you can see I've got my methods that we talked about here writing value where I'm setting the value that I'm receiving from the form control on this component I've got my change method aliased I've got my register on touched method aliased as well as my set disabled say I'm setting a disabled member on my component to be whatever the the disabled state is if you look at the template I've got my input and we've got some sort of changed event and when an user interacts with that I'm gonna go ahead and call untouched and unchanged and with unchanged I'm going to pass along whatever the current value of that form control is and don't worry I'll this sample code is available online for those of you not at the fancy tables with laptops out ok when we look at actually tying this component in door 4 markup this is what you saw earlier where I do have my component in there and this is what's really awesome we're not in putting or having any event listeners or anything like that we just are binding the same way we would bore bind a basic form control using form control name this is the exact same as using form control and then in the case of a group iterating through the forms controls and then using the key of whichever one you're looking for so that's all this takes to hook it up in your forum it's pretty clean right anytime I can remove lines of code and have something that's readable I am all on board so let's revisit our original problem of using this in practice to go ahead and create our type-ahead in our rating form controls so our type-ahead is going to look like this where we are using maybe some sort of third party library getting making sure we're displaying a name to the user but then what we really care about is submitting the idea of whatever that thing is so this is what that data structure would look like and I'm sure you've seen this problem before where you want to display something to the user that's readable that makes sense to them but all you really care about is submitting something else okay we will look at this markup because it's a little bit easier to see over here but I'm just using a third-party library here basic type-ahead we've been implementing these for god knows how many years now so there are a couple things going on in here I've got my data that I am passing in that is going to set the different drop-down options I am also using this template structure because again remember our our data structure looks like this and we don't want to display all that all we care about is displaying the name so that's what I'm doing here and then here is where I'm actually starting to tie my events into my form control so when the type-ahead select function is registered I want to call my custom on select function and the same with bowler if somebody interacts with our form control we want to go ahead and admit that blur function and so in my component that is then implementing the control value accessor we have these functions and I'm doing a couple different things here that are important to know remember we talked about write value being called with the value anytime that the form is either initialized or set value or patch value are done well for our UI to work properly if this chain happens we want to make sure that we're going through and actually manually selecting that drop-down so if there is a value I've got a custom function here that is going to select the appropriate drop down so we can make sure that our UI is corresponding properly to whatever's happening in that form control and then with the the events that we tied over here I have my on select event and when we're selecting something we do want a fire and on touched event because yes the user has touched and interactive at this forum and then if our actual forum item that has been selected has changed we want to go ahead and fire our on change method with whatever the idea of that item is and then with onblur we do want to submit a non-touch function and then this I want to make sure that I'm handling a situation where if a user completely deletes whatever is in the select the select event isn't going to fire and so I want to make sure that I am updating that to be a null value because they have eliminated whatever was in that forum so that's what an implementation of using the control value access or looks like for this case of a type-ahead of course you can begin to abstract this out and make it really easy to use in a variety of different scenarios and situations let's look next at our rating component and so this one is a little bit different because we're doing all this really interesting kind of displaying to the UI that doesn't really match up with a custom form control so what does it take to make this happen we can look at our star rating component and we're gonna see a lot of the same methods we're gonna have write value where we're setting our initial value and that is gonna set how many stars we're displaying initially so again if you are calling set value or patch value to change the update or change the value of this form control that is going to update accordingly this one remember that we said we want to disable it unless the type-ahead has a value so this is where we're implementing that set disabled state method and then whatever that returns I'm gonna go ahead and set my rating component to have the disabled member to be true or false so inside my HTML for this will kind of look at what that looks like because this is a very custom implementation it's not like an actual form control that I can just call it a sable so I'm gonna go ahead and I'm gonna add a class that lets me know and lets the user know that it's disabled we'll kind of gray out the stars they won't be interactable interactive excuse me and then when we go back to our component file here we can actually show how we are setting our rating and so we want to make sure that if the form control is not disabled because we don't want the user interacting with it that we can go ahead and we'll update the values I've got some special UI going on here for the rating text and then I'm omitting the unchanged with the star rating that I care about and then also emitting the untouched value all right so if we want to then go ahead and test our custom components implementing the CDA interface what kind of things do we care about well one the fact that wormholes aren't unit testable but control value access our components are so woohoo we're excited about that but we want to test that our methods communicate with the form controls as expected and so we want to make sure that when we're setting values our patching values are updating different states that that's going to behave as expected we want to make sure that when our form control is being initialized that the UI is reflecting whatever that value it's initialized with appropriately we want to make sure that disabling or enabling of the CVA component is implemented correctly so we can make sure our user understands what's going on and then we want to make sure that those validation classes that I mentioned are being implemented appropriately so that way we can begin to display really helpful information of the user so if we want to look at a test setup one of the ways that I prefer to test components using this or to create some sort of test host component where I'm going ahead and implementing my control value access or component in this kind of way I can make sure that the parent component which is going to contain the form control is going to get the information necessary updated but then I can also test what's happening inside of that test host component which is my control value access our component so if we're testing some sort of change event we want to go ahead and call our method that's going to be handling that change event and then we want to listen to our pair host component and make sure that that form control value is the value that we're expecting it to be so that's kind of a sample test of what that would look like we also really care about testing touch events and validations so we want to make sure that our form control is getting the information necessary so a couple different things going on here I'm setting this form control to be required to handle that and then making sure that the proper classes like ng invalid are being set when there's a blur event fired on that input and there is no value set so we want to make sure that that is actually showing hey yes this is now an invalid form control we also want to be able to test that value so if somebody is calling got set value or not patch value on our form control that our UI is going to reflect that appropriately if we're looking at our star rating component one of the things we're going to care about and this one is that our form control is being notified of the change when the star is clicked so again when we fire a click event on one of our stars we want to make sure that the form control in the our test host component has the appropriate value that we want it to have and then for the star rating component we do care about the disabled state again so we want to check test and make sure that when we disabled the component and then attempt to interact with it that none of our click events are fired and the form the parent host component form control does not get a new value because it's disabled therefore the user should not be able to interact with it in a way that would pass a new value key concepts for implementing the control value access sir just keep in mind that it's really great for granular control of displaying something to the UI but then communicating something else the actual form control value you want to keep your wrapper components very dumb you just want to be inputting and outputting values you want to leave the validation logic to the parent form component and the cvaa can be used with any form api including form driven feel free to take a picture of this this is the slides available that top link if you want to play with the app in case you're trying to implement this on on your own I go ahead and take a picture of that and then if you like this sweet sweet theme that I am using here that is since 84 that came out of couple days ago so feel free to check that out I hope you all walk away imbued with the power of the control value access ur and ready to go out and solve all the forum problems you could possibly run into thank you very much [Applause] [Music] you

Channel: ng-conf

Views: 19,935

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, javascript tutorial, programming tutorial, computer programming, google angular, Google programming, ngconf 2019

Id: kVbLSN0AW-Y

Length: 20min 20sec (1220 seconds)

Published: Wed May 01 2019