Angular Material - Custom Form Field Control [Advanced, 2020, Pt.1]

in this video we will finally start to implement the custom form fill control which you can see right now on your [Music] screen hello guys my name is mitchum zhanski in previous videos we learned what is control value accessor and how to use bridge pattern in angular today we will apply this knowledge in order to implement custom form field control which you saw just few seconds ago before we start i would like to mention that on my channel you will not find some casual or ordinary things i'm trying to cover a little bit more advanced topics so if you would like to know angular in depth it definitely worth to subscribe to my channel until you lost it in the endless video ocean called youtube okay let's get started and let's start with some best practices and the first one and most probably the best one sounds like let's sing before to code so i would suggest you first of all to create some plan so let's have a look at this slide and the form field we're gonna build and now let's try to split it into smaller components and see which components do we already have and which ones we need to implement so first of all we can detect this bordered area which is our material form fill container then we have a prefix search icon then label with a text search and also a suffix which is our drop down icon and in code it looks like this so the mod form field is our container then inside we have matlab component and two mod icon components which have the mod prefix and mod suffix directives in order to place our icons in appropriate place within form field but if we run our code as it is without that three dots of course we will get the next error which says that we are missing mod from fill control which is required to make it work so what is mod from fill control well usually mat form fill control is being represented as a matte input directive or mod select component but our case is unusual and we're going to represent our mod form field control as a custom component which we will create soon let's call it custom form fill control this component will have three and other components we won't build our custom select component so let's reuse material select then we will have some separator and the input but how this tool will communicate to each other well under the hood material from control we'll be using content child decorator to access our mat form field control and then we will implement breach pattern to pick proper implementation for our mud form field control which is in our case will be represented by our custom one by the way i have a great video about bridge pattern in angular do not forget to check this out later and last but not least we want to implement mod form field control interface to be sure that we didn't forget to provide all necessary public class properties and to implement all required public methods so it looks like we have some plan so let's try to code it as always in order to save your time i created some models and components up front and let me quickly show you what i have created so there you can find the new advanced search control folder and if we expand this you will see two components there inside and also one model so let's start with the model and there is nothing special i do import of all necessary models which i'm going to use inside also i have a few components which i define my declarations and i also export these two components because i'm going to use them outside and let's jump right now to the components and i will start with the search form field container uh this is the empty component mtts file but it has some template and if we have a look we see that we have the mod form field and they're inside mod label which has the just search text and two icons which are prefix and suffix and also we have the input which for now it's smart input but we're going to replace it with the custom one and besides this there are some styles which are completely empty okay now let's have a look at our custom form field control which i didn't change at all it's just empty component which i generated with ngcli it has empty template as well and let's have a look how it looks right now in the browser so we can see that there is our input which we're going to change and this is our form field control which we going to work with right now and we will put this component inside our form field control and make them work together all right so let's jump back to the code and what we have to do for this custom form field control we have to implement the similar thing what we have done in the video about bridge pattern so we have to provide inside the providers we have to say the next that provide mod um form field control and for form fill control please use existing and there we should put our custom form-filled control component all right and after this we have to implement besides the engine in it we have to implement this interface so let's do it right now and right after only need i will place my form field control it complains because because it's generic types so we have to provide some type here and this type is going to be the value of our custom form field control and i will create some interface here i will say that export interface um let's say it's a form field value and there will be what it's going to be there will be a um query so query string it's going to be string and there will be scope yeah there will be this drop down which uh switch the scope where we going to looking for some certain entity and this scope is going to be string as well let's keep it simple and now inside this generic thing i have to add my form-filled value and now it's complaints because we have to implement all necessary field of public fields or methods and we can click quick fix and it suggests us to implement interface of mod form field control so i press enter and we can see that my vs code generated all necessary fields for me and now we can actually comment out this everything and just in theory it's enough to make it work inside our form field material form field it will do pretty much nothing we will go one by one and i will tell you what means this uh value property change state and so on we will implement them all properly but for now what we can do is actually save it and then we can go to our app component html and we can sorry not here here we have to comment out our custom form field and then inside our container this is our container and if we go to the template here we can remove this input actually or comment out and we can put there inside our app custom form field control and theoretically it should work let's have a look so i save it and then we can go to our google chrome and yeah it's actually works in inside the oops inside we have the error what it says um cannot read property pi ah okay because we have to most probably implement this state changes so it's going to be a new subject subject because it probably tries to subscribe to these state changes and it cannot because we didn't define it so now if we reload yeah we see no error anymore and it looks uh to be honest strange yeah because we have some paragraph inside but it's actually works okay now let's get back to the code and let's start to implement our template so i go to the custom form field control html and we have to replace this paragraph with the actual template and as we remember from the slide we have the drop down section which will be represented by matt select component then we have the divider and we have the actually input so let's start to do it and uh actually it will take some time so i will accelerate a little bit the speed and then i will just quickly explain you what i have done all right let's get started [Music] all right i have done and let me quickly show you what i have changed so here is our html file so i created the mod select with the three options for all countries austria and ukraine and then we have mod divider which is vertical true because we want to separate blocks vertically and also the input which uh yeah has a multi-input directive oops and also i have added some css styles to this for host element i edit display flex and align items by center to have them properly aligned and then for select we have max widths 100 pixels i think it should be enough and we have some margin and for divider also i define the height uh color and margin between um input and our drop down and in browser it looks like this so if we reload yeah there is our drop down we can select any country we want and also we can focus here and start to type something right so and i yeah i also removed the drop down icon uh suffix here because uh in this context it makes no sense this is just input we don't need it so this is all changes regarding the templates and i will close this and let's start to go one by one uh and configure our properties which are required by our interface and i will start with the values so i will also accelerate the speed to um i know make the video a little bit faster and once i have done i will be explaining you what i have done and why we need it [Music] do [Music] okay i'm done and let me quickly show you so first of all i created our value as an input so i want to provide the as example initial value from the parent component so i do this like input and then i did it as a i created getters and setters for this and because i want to have control um i hope to i want to perform some operations when i set the value as example and in our case i want to trigger the state changes property it's you can see this is the subject rxjs subject and we need to trigger it because form control user's own push strategy and with these state changes we kind of notified uh to trigger the change detection because otherwise we we don't know when we should trigger the change detection run and this stage state changes property actually does this job so once we do once we call method next on it it will uh trigger change detection so angular can understand that something has been changed and we render it properly and once we set the value we want to trigger it and then we have the getter where i just returned this value and also i renamed our value property to underscore value and mark it as a private because we don't want to get access it from the outside and the next property would be id and yeah let's start to implement it [Music] so here we go id was implemented and id of this it means actually id it will be i generated a unique string um for this component and there will be added uh id attribute to the our host so i'm using this host binding binding sorry and yeah i'm using static property next id which i created online 24 right and there for every instance new instance of this component they will be incremented by one so we get some unique string so every component would have its own identifier because we must probably need it for testing purpose or whatever and yeah just to prove you that it will be added to the host you could see yeah there's our id attribute and here you can see the custom form field id and in our case zero because it's like first instance uh okay very good and then let's go to placeholder okay let's placeholder ah by by the way before we proceed let's maybe bind our values to our template and let's see how if our value is working actually so i will go to our template and here instead of value i will do it like this and here i oops [Music] and here i will say failure and then then i have to go to our container and i want to set default failure for this and default value for this will be as example we call it ate and now if i save it we should see that austria is pre-selected exactly what we see right now and if i change it to ua it will be predefined ukraine so our very is working just exactly as we want i will leave the default value as a all which is empty string right and now let's proceed with our properties it's in custom form field and the next thing is our placeholder so placeholder it's uh quite obvious it will be the similar uh like we did from input so inputs are for values so it's going to be input and it's also going to be the getter and setter so we can easily replace it here so i will again accelerate the [Music] things [Music] all right here we go here is our placeholder the same its input because i want to assign this from outside then we do the setter so we set the valid then we change trigger change detection and then we have the just getter and now we have to assign this also in the template so let's go there our custom form field and for our input i will assign it here just after this we will create the placeholder hold there and then we will assign our placeholder so now i can go to our container and here i can define placeholder placeholder and i will name it start to type as example and by the way if you have just a string you can use input without this braces just like this and it will work just fine and now if we go to our template we see so far nothing but it's because i will show you it because we have to set focus to true and also should label flawed to true and then it will be visible because otherwise we should not see this placeholder it's by design like this but it's just to show you yeah you see that now we see our placeholder and also we see the focused state and yeah and i our label is flooded to top but that's we hardcoded so i will revert it and we will implement later on a proper proper logic for this so placeholder then we will skip this energy control because we will add the support for reactive forms later on and later on i mean in next video so for now i will set it to null and next thing is going to be focused and here we let's implement some some logic for this and i would like to set the focus once we focusing on our input right and for this i would use the focus monitor which comes from angular material cdk so let's implement it [Music] [Music] so here we go i've done with the focusing logic and yeah let's start from the top uh what do we have we have this focus i changed and nothing here and then i injected the focus monitor which comes from the materials cdk as i said earlier so here we go where is our yeah cdk accessibility uh package and then oops so let's go to the our constructor and there below in ng underneath i monitor our input and our input it's just reference to our mod input so i do it via view child i get reference to mod input which is in my case uh this directive right and then i read element ref from this and after this i say that it's static true means i want to resolve it before change direction run so it will be available in engine and it lifecycle hook and it will be assigned to our input which i am actually listening for a focus event and once i subscribe to it we can see this focus origin and it has um it doesn't it doesn't show but it returns the null if we blurt from the input or it shows um how the way how we were focused there is the string let's say where is this focus origin yeah you can see it's a touch mouse keyboard so it says um how did we focus on this either we focus by the uh clicking on the input via mouse or we touched somewhere on your iphone or whatever or we focused via keyboard doing tab so something like this and once we subscribe to it we just cast it to the boolean type so it will be true if we focus somehow or if it's null it will be false so we are kind of blurred and then we trigger the change detection run and then i implemented ng on destroy lifecycle hook and we have to uh stop monitoring this input to avoid the memory leak and also i added complete to our stain changes because it's if we didn't do this we would get as well the memory leak so now how it looks like so if i click on my input you see we get this green border below and we also our arrow down icon turned into green as well and this is the exactly behavior what we expect from the focused state and you can see how it changes the its state and yeah that's it about the focus and now we go to empty so let's implement lmt logic so here we go this is super simple part i just uh created a getter empty and i will return just true or false then i take just the value and i say that if valia for whatever reasons is empty then we consider it as empty or we can actually let's say a little bit complicated thing because we have to um we have the complex object so we have to check if query is empty and the scope is empty right so let's do it so i will say uh if um return va luyah if query not query and if empty this very score as well so if this is negative and this is negative so we consider as a true right so that's our empty then we have shoot label float so let's start to implement this part [Music] so here we go uh should label float is implemented so we return also true or false and depends on the condition so in our case um the label should float up in case if we focused right or if it's not empty so if we have the value defined there it should be also flooded to the top right and also we have the uh floated class which will be added if we meet true condition and you can use it as example for cases like you see now the our label is not floated at the top right and we want to let's say hide this everything hold this area when it's not floated but we want to show when it's flooded so let's go to the styles and quickly implement this so we will um do opacity zero so we uh we hide our control in case if it's not focused or and not empty and then we say that if host and floated plotted then we will do opacity as example zero and now we see that it's gone we have only our label right and if we focus on this we see that our control appears and our label goes up so something like this if you need you can implement this but for our case i will leave it always floated so i will return it just true just to simplify things yeah and ah and we have to revert changes here here so here we go and yeah you see our placeholder or also appears already so cool then what we have next what we have next and here's we have required so required it's quite easy i will just copy the input i will do this like input so i can say from the parent that it is required and it will add the asterisks to the label so let's uh have a look so i will say that it is required true and if we go here you see this asterisk now that's like indicator that this field is required good good good good uh then we have to say if it's disabled this is also quite simple i will do this like input and yeah we can also define the disable state here in from the container so i will do this oops disabled to [Music] true and now if we go we see these styles were attached right so this is a form-filled mat form-filled like standard behavior and we have to probably give some opacity to our control so we can go to our template and we can say how it's better to do as example input we can do ng class or better ng style and g style here we go and here we will say that opacity uh depends on disabled dc but if it's disabled then the value will be 0.5 otherwise it will be one should work i believe and now yeah you see it was disabled and also we have to disable uh there the input itself this and here we copy this all right and now if we try to click we can do nothing because it's this field is disabled all right so yeah let's leave it as it is then we have error state error state it shows it shows either we have error so i can hardcore it to true for now and we will see that it was highlighted with the red so it's indicates the error state for our form field and actually for now let's leave it um hard coded to false and the next video where we will be working with reactive forms i will show you how you can match the state of your control with the form field actually and control type control type it's just optional name of the form control so we can give it some name called i don't know custom form fields all right and then it goes out of field and this auto field state it does actually you know when you sometimes pick your address or whatever browser like does autofill the form for you and this defines the state uh when you after fill the field i don't know i cannot just now come up with some really useful use case but for whatever reason probably you will need it and uh it's actually optional we can uh remove it for now if you don't need it and as far as i remember the uh in angular cdk they have uh input model and they have the autofill monitor it works likewise this um my focus monitor so you can play around with this but let's keep it simple for this lesson and yeah i will just uh remove it for now and maybe in the future i will create separate video for for this so the next stop is set described by ids method and uh described area is um this is accessibility feature actually the idea is that um well there is a ids which describes some certain area so in our case it's our host and it returns the ids which belongs to this section and we can do it like as example i can uh implement something like this yeah you can see we will attach the area described by attribute and here below we will remove this and we will return actually not return we will assign to these described by we will just we will just join this uh array of ids and there will be will be like this we separation by space okay and now if we save it let's have a look how it looks like and let's debug our host where is this app custom form field and let's try to find this attribute yeah area described by and in our case it's uh just nothing because probably it returns empty string or empty array i don't know let's have a look what is inside console.log yeah it's just empty array okay so let's remove it the next interesting thing is the on container click uh this is what we what action we want to execute once user click on the this container so for now we could as example focus on it but let's say the focus happens only if we focus on the input which is you see how it's small but this area is way more broad and if we highlight this everything yeah what happens if we click here below a little bit so that's we described in this method and in this method i want to just focus on our input in this case right so i will do the next if i click on the container i want to use focus monitor and we say that focus via and what did expect uh it waits for our element so this is this input and probably the origin so let's say it we focus via program yep why not and uh yeah there is the event we which if you need to you can use but in our case we don't need it i just like if we click we just do the focus wire and let's have a look how it works oops i have to almost probably turn off the disabled state so i will go to this part and i will remove just disabled and let's try to for click somewhere here it doesn't work for whatever reason or let's say maybe i have to click somewhere aha yeah now it works yeah you see so i click on the label which is part of this smart form field and yeah we are getting focused i clicked probably to to below way more and yeah let's go further what did we forget something no i don't think so okay i hope i forgot nothing except one really tiny thing which i would like to show you so with smart form field you can work as as you works working before so i mean that whole properties are being supported so you can change the appearance as example we can change it to feel and we will see that design of our input has been changed so we got this light gray background and also we can change it to as example outline and we will see that our design has been changed as well without any additional changes in our css files it's just yeah we're just changing the input so yeah that's it i think for today as i mentioned earlier in next video we will implement support of reactive forms so you will be able to work with our custom form field as with the regular form control okay that was it for today i hope you enjoyed this video and it was useful and interesting for you i'm looking forward to see you in the next part of this video where we will continue to work on custom form field control and we will add the support of angular reactive forms subscribe to my channel right now if you like what i'm doing also don't forget to leave your thoughts your feedback in comment section let me know what you liked what you didn't like so it would allow me to improve my content for you and yeah i wish you productive week and see you in the future

Channel: Decoded Frontend

Views: 10,709

Keywords: angular custom form control, angular custom form field, angular material form field, angular custom form control validation, angular material form field tutorial, angular material form input, angular, angular material, advanced tutorial

Id: 8ThVof0Rz64

Length: 43min 16sec (2596 seconds)

Published: Mon Jul 27 2020

Reddit Comments

[u/kh4l1ph4]

I started learning angular about a month ago and watched some of your videos. Your knowledge of the framework greatly inspires me. You're a gift.