12. Custom Angular Form Control

hello everybody in this video we will see how to create an angular custom form element for html input fields so let's get started first let's see how the component html looks like we have the form group with a myform group instance here we based on both subclasses that's where we have here a margin five we also have div class form group and as we can see we also have the form control this is a very simple html form right the only thing that we have is a label and an input and of course we have the form control name input1 let's have a look of how the code the source code looks like we have a form group with input 1 no more than this so how about now it will have a bigger form let's say that i have this could be the input tool and also to have the input three input four something like this of course we need also to update the bindings here of the form control name and how to do this let's create input 2 input 3 and input 4 and of course let's change this as well input to here input 3 and input 4 and let's apply also the binding input 2. input 3 and input 4. this is our very very simple form let's go to the browser and see what we have this is what we currently have input 1 input 2 input 3 and input 4. in order to be 100 sure that the binding works correct let's do the following let's create a pre-element here and i'm going to have the my form dot value with a pipe json this is what we have input 1 input 2 input 3 input 4 with null and if i start typing anything here value 1 value 2 value 3 and value 4. it seems that we have a correct binding nice so let's face the problem the problem is that how about later on in our product we have a request from the ux ui or the product manager and we need to change something that has to do with how we have constructed our components of course we have to apply this change four times in this very small example but if our example is very big it's hard to apply this in all the input fields the solution to this problem is to create a custom form control so how to do this what we're going to do is to create a new control generate a component and i will name it custom input this is a pure component and let's open this and inside here in the html we're going to paste this one this code so this is our code this is how this component in blade would look like since this is a totally new component and we currently do not have any form group nor from controls i will delete this one and also we need the label to have it more dynamic so what i'm going to do is create an input here and i will name it like label and the type string and have the exclamation mark here because it's strict and let's go again in the html and i'm going to interpolate the label inside the label element nice let's get this selector the app custom input and now let's go to the component html what i have to do is to replace all of this html code with my new component selector if you remember we have also the label which is an input so i can just have here my input one like we have here right input one let's do this four times input one input two input three and input four this is our first step of how to create a custom form input a custom form component so let's go to the browser and see what we have similar to the previous implementation we have input 1 input 2 input 3 and input 4 how about now if i start typing here of course the binding doesn't work well why because we didn't attach the form control name so let's do this i want this instance of the component to have the form control name input 1 and then do the following on the other on the second one on the third and also the last one nice so let's have some spaces here let's go to the browser to see what we have something went wrong let's see the console it says that no value accessor for form control with name input one it seems that we need to have a value accessor so this is what's missing we will go to the custom input component and we need to implement apart from owning it or any other hook we need to implement also the control value accessor and i will implement the interface and we have here some methods we have the right value we have the register on change the register untouched and that's all actually these three methods right value register on change and register untouched are okay so let's go to the browser and we still have the exact same problem and the reasons why why do we have we have already implemented the control value accessor so why do we still see this error so we have to tell angular to use this particular component as a form component so this one we have to instruct angular to use it like a form component to do this we have to declare the a specific token and actually we have to provide a specific token to do this we will uh add the providers and we are going to provide the ng value accessor token so ng value accessor so by registering this token angular will know that this particular component is part of form components and we have to say that i use existing provide the custom input component and the question now is the following am i going to have this exact token more than one times yeah definitely we use the nz value accessor many times and angular use this token as well so have to be like i will use this token more than once let's go to the browser to see what we have it seems that we do not have any error nice how about the binding though if i start typing here anything value 1 we don't see the value 1 in the corresponding form control why is this because we didn't implement any of these methods so let's start with the right value we use this method we use the right value method to write a value from the form control instance to the native html control and to do this we will have like a value of type string let's have it like this and as soon as we have any value from the form control instance we're going to provide this one to the scoped value so this value equals to object and of course you have to use this one in the input like ng model equals to value so what we have done currently is that we have applied a binding in the custom input component in this input and with this value and it will go back to the custom input component this is where it lives nice now let's go to the browser and see what we have again if we start typing we don't see any value as we said previously the right value will use this method to write a value from the form control instance to the native html control let's go to the upcoming ts which is the place that we have created our form group with the form control instances and let's type here any value so i will have here value one and i will have just here value 2. let's go to the browser nice so what we have done is that we provided this input from this form control to our custom form control and we did this via the method write value excellent how about now if we start typing we need somehow to update the form control instance we will use the register on change we use this method to propagate the value from the native html control to the form control as we can see we have here a function so we will use this function to be like unchanged we will create another one which function type will accept a value of type string and returns nothing and we will use this on change equals to function as soon as we have done this we have to use this method because this particular method would propagate the value from the html control to the form control instance when to use it let's go to the custom input component html and we will use the nzmodel change and we will invoke the unchanged method with a dollar event this means that any time we do any change in this input this energy model change will fire an event this is our handler the unchanged and this one will propagate the value from this component to the form control instance let's go to the browser and see how about if we delete this one nice it seems that we have applied correct binding if i type anything here we can see that the binding works nice very good one so this is how we apply a binding using a custom form control let's inspect this now and let's reload what we can see is that here we have the engine touched ng pristine and ng valid engine touch and ng pristine and also have the same class names here engine touched ng pristine and ng valid how about if i start typing we can see that now the customer the custom one is dirty same here the custom one seems to be untouched and same here let's now blur and what we can see is that the custom one remains untouched however the native input field is touched so we need also to propagate this event we will use the last method which is the register on touch and we use this method to propagate the touched state from the native html control to the form control similar to unchanged we will create the untouched this untouched equals the function and we have to invoke the method which one not this one but we have to invoke the untouched method and the question is where do we have to invoke it on the blur event untouched as is let's go to the browser and let's have a look so if i click and blur what we can see here is that we have ng touched and the same here and detached and this is how we create custom form controls that works perfectly with reactive forms and template even forms huh it seems that we have an error here let's inspect this one what is about in the untouched let's go untouched let's go here oh yeah we have a value and we don't provide the value and yeah problem solved let's make sure that everything works fine we still have the binding and we still have the correct statuses nice so thanks for watching

Channel: Code Shots With Profanis

Views: 1,022

Rating: 5 out of 5

Keywords: Angular control value accessor, Angular controlvalueaccessor, Angular custom form control, Angular form control tutorial, Angular template driven forms, angular, angular form, angular form control, angular forms, angular forms tutorial, angular reactive forms, angular tutorial, angular tutorial for beginners, custom angular form control, custom form control in angular, form control, learn angular, reactive forms, template drive forms

Id: WGU-DnhpsA0

Length: 15min 20sec (920 seconds)

Published: Sun Apr 04 2021