Control Value Accessor in Angular [Advanced, 2020]

the topics of today's video is controlled value accessor in angular [Music] hello guys my name is mr. emergence key in this and next videos I'm going to show you how to build a complex form control the same like you can see right now on your screen but in order to understand how to implement this feature we need to understand some patterns and techniques which will allow us in them to achieve our goal and today we will start with the control by the accessor subscribe to my channel right now if you don't want to miss my next videos because in next videos we will cover really really interesting and important topics are you done then let's get started in order to save your time I prepared some component and modules which I'm going to use in today's lesson and let's quickly walk through all of them and see what is inside and I am starting with the lock input component which you can see right here it's such a simple toddler which changes its state on every click so once I click the lock is open then I click one more time the lock is closed and that's pretty much it and how I implemented this this is just simple angular component which has the it's locked property and then in template I have some place hole sorry not place holder but label and then I have mat icon which has on click handler and on click I just toggled the is locked state and depends on this state I just show icon lock or lock open as simple as that and there is some styling to align the elements as I need and next element is the value accessor example this is the component which has the form you can see it right here and I inject the form builder and then in ng only needs I build the form and we have on submit we console.log the values of the forum then in template I just met my reactive form to my template elements you can see the form group form control name then we have just button and our app lock input there and that's how it's working so I can easily type some value in add item input and then click add item and see their values the next thing we have to check is component form control model there I define declarations then I import the necessary models and I export the ballet access for example component and then I import my form control complex form control model in the imports in my app Model Ts file then I just commented out our drop down search component which we created in my previous videos about angular CDK overlay component and I replace this with my Apfel accessor example component so that's what I did and now let's imagine that we have the task so we should move our lock input component inside the form and we should not make it just a part of the form it should behave like a form control it should be always in sync with our reactive forms which we have in our TS file so it should share it stayed with this form and it should be always in sync and let's think how we could implement this so I think the first thing which could come to your mind if you don't know about Vala accessors it's to create some output which is event emitter and then when user click on that icon we create the onclick handler they will switch the state then we emit value to the power and the parent already catch this select event and creates its own handler on select in our case and then on select you have to catch this value and then most probably have and then you have to create new form control which is it's locked in our case and then you have to in the unselect handler you have to update the value for is locked form control and it looks very messy and if you have the dozens of these form controls can you imagine you have to create such events handlers for every for every form control which is really hard to maintain in the end so there should be another way and I'm going to show you right now so first let let me roll back these changes I will just remove what I did before so we have to remove on click method and then in template we just reword revert our code alright so looks good the next approach would be most probably to assign this is locked form control the same way how we did it for input so we're using from control name so let's try to the same but for our component and let's see what will happen and saving this and and we have an error and it says that null value accessor for form control with name is locked so let's try to Google for this control Bala accessor and let's see what anger documentation says about this and we can see that control value accessor it's just interface which requires this three method to be implemented and also optional set disabled state and if we scroll down to the description we can see that they say implement this interface to create a custom form control directive integrates with angular forms alright that sounds not so hard so let's copy this interface and implement this for our app lock input component I will add this right after ng on in its lifecycle hooks import this interface and we see that vs code tells us that we have to implement these three interfaces and if I click on the quick fix it suggest me to implement interface control Val accessor automatically I just click on it and all my interfaces which I need are implemented and now they throw the error we just commented out this for now and then we will be implement this one by one but implementation of this interface is not really enough we have to tell angular that if someone wants to access in G value accessor please use my existing class which in our case lock input component and we have to say that it should be multi true so it can be multiple instances alright so in this case literally happens the next when we attach this from from control name directive to the any element it tries to access this ng value accessor and once it acts and once it finds the successor it then goes and checks what to use what what class to use as the representation of this ng value accessor and in our case we're saying that use existing LOC input component because this component has implemented all necessary methods you can see this right value register and change this is only things which angular need to work with certain component as with the form control and you will see this layered it later so let's go back to our application and we see that our error is gone so it does nothing but at least we got read from this error and then if we click add item we can see that our is locked is there but it's not so far and yeah it proves that our accessor is working but not really how we want to have and let's make it work appropriate way so first I will rename our is locked property to the value because in this context this name will be more clear and correct so let's start with this right value method from the name of the method we can understand that we just assigned the value in this method so I will do the same I will assign to my value the object which it receives and we will change the type to boolean because our value is boolean time but the question where it comes who triggers this method it will be triggered once we define there or change the value in our form control so if I define the truth value in our firm control it will under hood trigger this right value and we assign this value what we receive from the firm control this object it's the value from the form control and we assign this to the value okay and then in this value will be used in our template and depends on this we will show appropriate an icon okay and to judge just to prove it I will console.log it if we're load you can see that log input component was triggered and this was triggered exactly because we define the value in the form control constructor and now we can see that I click add item and is locked is true so let's go to the our accessory example component and change to the false and you will see that now it's console.log false and if we submit our value we can see that is locked is false so that's how the things are working with this right value so I will remove this console.log and remove this commented out code and then we have to do some opposite thing so we now have to notify somehow our form control so kind of parent that the value was changed and when we click on the value our firm control should catch this change and reassign the new value to 2 itself for this to achieve this we should create the own change property where we will register our own change function which will be passed as an argument to our register on change method so that's the thing what we have to do once yes we have to register our own change and then we have to call this function every time when we change the state in our case we have to do it on click and we have to a little bit refactor the sync I will remove this part from my template and I create the set value handler and in this set value I will switch the state and then I will trigger this on change and pass the new value of my component the new state so now once I click our component will notify our form control that the value was changed so update your state as well and let's have a look how it works I type shoot be locked I lock this we add input and we see that it's locked is true when i unlock this and change that it should not be locked we can see that is locked false so that's how these own change works it just notifies form control that something was changed okay the similar thing we will do for register on touch and on touch it happens when we focus on some item and then blur and it's me this means that form control was touched we didn't like changed nothing but we touched we focused on it and for some certain cases we needed to maybe highlight it somehow with the Styles whatever and I want to achieve something like this with our components on click I want to mark it as touched and to somehow test it and see the result as disable our add item button if the form is not touched so I will just do disabled and it will be disabled it for if form not touched so now we can see that my button is disabled once a focus then blue our form our button is available again but now if we click on our icon you see our button still disabled so this on touch mechanism doesn't work so let's implement this I will do pretty much the similar thing what I have done for unchanged but I will rename this property to untouched and then I will register the same way absolutely the same way our untouched function and then I will call this function on the set value ok so somewhere after on change we will trigger the untouched and it complains because expect that one argument because there we don't need the argument for untouched and yeah that's everything what do you have to do and now if I click you see our button is active so that's mean that our own touch behind is what's triggered and when form has at least one element touched whole form counts like touched okay and yeah we can see that all our values there so that's fine the next thing we have to do is to disable our lock input all right so I will create another property called disabled which is false by default and will assign to our disabled property the value which gets this function and then in our template I want to assign disabled control class in case if our our LOC input is disabled or remove this class if it's enabled super easy and I will copy the string create the CSS class and we set the opacity and now 0.5 and we disable all pointer events and the last thing we have to do small check its if it's disabled we should not execute valid changes on change methods and so on we just to return yeah and then just to test it we will refactor a little bit form control and instead of false we we provide the object with valid false and disabled true and now if we go back to our application we see that our disabled class was applied and our icon has this opacity 0.5 and if I click nothing is happens and that exactly behavior what we expect from disabled input all right and now if I revert to the false you can see that our input is again enable I can interact with this no any problems and this is actually pretty much it what you should know about control Valley accessor in angular it just allows any angular component to behave like a form control okay that's what's it for today now you know how to make any angular component behave like a form control and this feature is very useful and very flexible and I'm pretty sure you will be using this feature quite a lot in your application and as I said in the very beginning this video only the first video in the video series where in the end we will build the complex form field control and in next video we will learn another technique which allows us to achieve our goal subscribe to this channel right now if you don't want to miss it and thank you for attention and see you in the future

Channel: Decoded Frontend

Views: 18,380

Keywords: angular custom form control, control value accessor, control value accessor in angular, angular control value accessor, angular control value accessor example, control value accessor angular 8, no value accessor for form control, angular material form field, angular material form control, web development, angular, tutorial

Id: OrmIfW8Ak3w

Length: 18min 45sec (1125 seconds)

Published: Sun Jul 12 2020