How to Use A Control Value Accessor [Angular Series]

so let's take a quick look at the angular control value accessor and basically what this does is it connects elements to the angular's form API so right now I just have a form and I have a button to save and then I have a button to disable every input right now there's only one input so let me show you what I have in the code so I basically have a component called garage and then I have another component called car and I'll get into that one in a second so my garage component just has a form that's wrapped in a form group which is a reactive form in angular and this is my input right here I just have a regular input with a form control name of owner and so that ties in to this form whoops this form right here this form has basically two form controls owner and car one and I also have this validation message here so I'll show you that really quick so as soon as you type and remove it'll tell you that it's required so that's just my little message there and then when you hit disabled then you can no longer type into the field so now let's say that I want to add a custom component here but I want it to be part of the form group right so let me show you what I mean right so I have this car component and inside of this car component is just a regular input nothing special and I'm gonna output this component here but I want to act as part of the form and let me show you what I mean so I'm gonna copy this input now I paste all the same things but I'm going to remove the input itself and instead I'm going to add my component which is AB car then I will change this and so I already have a form control for this car one right so that's this one right here so I've added that in there right and let me take a look at what this looks like right so everything looks fine however when I type in and I remove everything it doesn't tell me that it's required and when I hit disable it doesn't work on this form even though my function is actually disabling every form control right so I have to and basically my function all it does is it loops through every form control and it disables it right so car one actually is getting disabled and I'll show you that really quick I'll hit save which basically just logs it for right now if you go to the controls of the form and you go to form one or a car one you see that the status is actually set to disabled so this is disabled but right now this has no way of knowing that this is the form control that I specified right because of course you have to provided a form control name for this to work okay so I'm going to go ahead and copy that and paste it here but this time I'll use the cart the form control that I have again right here car one so I have to specify that name and then I'm also going to copy this validation message down here whoops Reata quotation and then I'll just change everything to car one now you'll notice that as soon as I save that I get this error here that says no value accessor for form control so this is where you need to implement that control value accessor in order to communicate between the forms API of angular and this element here so what you need to do is go into the component write this app car component so go into that component and then over here at the top you have to say implements control value accessor right and that comes from the angular forms library now with this interface you also have to implement some methods right and that's why I'm getting this red underline here because Visual Studio code is basically telling me hey you need to implement some methods now if you have v/s code you can implement them automatically by clicking there and it will automatically add all those methods for you but if you don't have vyas code then that's fine you can just copy and you can just copy you know what I have on the screen here so then next you have to add one more thing and right below here you want to pass in comma and then say providers which is an array of objects so I'll pass in my first object and it's gonna say provide ng underscore value accessor you also want to import that from the angular forms and then followed by you want to say use existing right and we can just say forward ref which comes from the angular core and then inside of the parentheses of forward ref you pass in a function like this that points to the car component right and this is basically saying there's already a value accessor for this for this input right so just use the one that it already exists right which is coming from here from my form and then after that you want to say use I'm sorry not use multi and then true alright so then below here I'm going to provide I'm gonna create a variable called value type string and that's just gonna hold the value that comes in from my input right I know that the value is gonna be a string because I've assigned that here when I created the form right it's a string so that's the form that I mean that's the values that's going to be held here so I'm going to copy that and assign it to this input so that it will be displayed so I'll just say value equals and then my variable now back over in the garage component I'm also gonna provide a default value here just so that I know that this is working so I'll just say Ford and so that value should get passed over here now now let's get into what these functions are so this write value what this right Valley does is whenever there is a value that comes in from from the component that's hosting this so my garage component if it has a value preset which mine does I just gave it this value right then it's going to call write value what's gonna call it no matter what but what gets passed is any value that might be assigned to it right so I'll just rename this to value it's gonna be a type string right so since I assigned it forward then this is going to pass me the string of Ford so now I can say this dot value equals value that'll grab that value now in case we don't have a default value I don't want to assign undefined so I'll just say if values true then give it value if not just give it an empty string okay so I'm gonna comment these out for right now and we'll get to those in a second for right now I just want to save everything and see if this is working so you shouldn't see that air anymore and then you should see that default value there now in the input so now it recognizes that this is a valid employ and now you'll see when I hit disable it disables this top one but it doesn't disable the the form here right and also if you delete the value it doesn't tell you that it's required okay so we don't have the full capabilities yet because we haven't finished mapping these here and going back to the garage component I'm going to show you a few other things so at the top here I've noticed create a heading to show you a few things with my form so just bear with me for a second so I'll say form and then I'm going to get the form control called car one and I'm going to log its value for right now so say value and then I'm gonna do this a few more times so this one instead will say touched whether or not the form has been touched this one's going to say dirty and then lastly this one will tell me if it has an error so you can do that with has error and then pass in the name of a specific error that you're looking for which mine is just check and see if it has the air of required right because I've specified that this form control this input should be required so I should have an error if the field is not filled in so let's go take a look at what we have right now tells me that the value is forward but if I change this notice that the value never changes okay that's because we haven't registered this on change function okay that's what that does then you see that it says touch false and then if I you know I've already touched this input and focused out of it but you notice it still says false that's because we haven't registered this one and then lastly the disabled is not working because of course we haven't set that disabled state there and then lastly you'll notice that if I delete the value it doesn't give me that area of required but that's really because this value is hard drained in here if I were to not provide a default value then that error would be here okay because the form control is wired up properly so it'll know if it has a valley or not so let's implement these these methods that came from the interface to correctly get those messages so first what I'm going to do so basically what what this does is when this initially loads it basically tell it asks you to register your on change function right so basically you define the function here and then you assign it the function that comes in from the control value accessor and then it takes care of it for you so let me show you what I mean so I'm going to create a function here called on change and it's not going to return anything and then one called on touched and then finally I'm going to create a variable called disabled which is a boolean so then now here when this comes in right when this initially loads it's going to pass in the function you just need to assign it so I can do this dot on change equals function and then here I can do this dot on touched whoops equals function and then this dot disabled equals is disabled okay so now we actually need to implement all four of these in the view right so first we're gonna bind to that variable so disabled equals disabled so once this abled equals true it's going to disable this input so for the on change you want to call that anytime the value changes so I don't have any functions in here that's changing the value but if you did like you more logic in here you want to make sure that you call that function the on change anytime that value changes otherwise they won't register so what you can do here you can bind to an event and call that so let me tell you let me explain a little bit what I mean so this is an input and so every time a value changes here the input event is gonna get calmed so I can bind to that I can say on input call the on change event but I also need to give it the new value so I can say event that target that value so what that's going to do is anytime a value is is changed is this event gets called this input right so the the event itself is the input event the target is this element and then the value of course is the value from this element so that's gonna pass it to the event which is gonna register it and send it back okay and you'll see that now so you'll see the Val here's forward but then as soon as I keep typing now the value is being changed so now let's look at the untouched so what you do for this one same thing I'll say the blur event which is when you when you leave an input when you focus out of it will say on touched okay so now let's just that one will click here and then focus out and you see it gets set to true okay okay and then let's test out these disabled you'll see now it actually is disabling it and then I'm also going to test the air and you'll see you get the air required there

Channel: David Acosta

Views: 21,159

Rating: 4.9523811 out of 5

Keywords: control value accessor, controlvalueaccessor, how to, tutorial, angular forms, form, forms, api

Id: EY0Nw06xyt8

Length: 14min 22sec (862 seconds)

Published: Fri Sep 28 2018