Create a Text Input - Angular Component Library

welcome to the next tutorial in our angular component library series in this tutorial we're going to be creating a text input component it's going to be quite similar in many ways to the button component and how we approach that however we're going to take advantage of the workspace generators we created previously to easily scaffold out our new library so let's get started first thing we want is we want to create our text field library or text input library and uh we can do that by using our nx console we create generate uh we have now if we do search for library we've got our workspace generator we can generate our library and we will call this we'll call this text input i suppose um we're going to probably add things like um validation with form fields and stuff like that in future but for now we're just going to call this text input and focus right on the the input box itself and this is looking good so we can hit run and that will now create those files on our disk so if we go back to our file um folder uh structure we can see the text input folder has now been created along with our storybook so we can test things out um and our library and our ng module and stuff like that so if you don't see those um options in nx console go back and check out my last tutorial and you'll be able to see how we created those so you'll see we have everything we need to get started um i'm just going to get rid of common module because we probably won't need it um yeah so we can get started now by creating our component our text input component and adding it to the library now we also added a workspace generator for um creating components so we can take advantage of that so we create text input and we want to add it to the text input project and here it's going to run a little preview of it in the window and we can see what's going to be created that all looks good to me so we can hit run and again if we hop back to our folder structure here we can see we now have a components folder with a text input subdirectory and we have our stories file created and um our component and our ng module has been updated with our input and exports so again exports required if we want to let other people use this component we also notice our input ts file has also been updated to include the export of that component great so let's start by running our um storybook okay so we can do that by running uh mpa npm nx run um storybook and we want to call this or to be text input [Music] got this wrong around okay i'm run okay this is going to start our storybook up now and we can change the title just to text input for noi um that's fine again i'm going to create a little uh template region here so we can actually use our component in here great so let's open that um url and we'll see our primary but obviously nothing happens just yet so if we hop back to our code let's take a look at our components so i'm going to get rid of all this uh first of all just a little bit of cleanup great so similar to button uh input fields come out of the box with a lot of accessibility features and things like that and we don't want to reinvent the wheel we don't want to create our own byt text input component because what would what we'd have to do um is put an input in here right okay so there can be multiple types of input like text or email or things like that and we would have to create props for all those things and then forward them into our input field so you know we would have to create an input in here and so like type and then okay do we if we want to we could just add string but equally we might want to be a bit more specific and do text or email you know etc etc that that kind of gets a bit gets a bit annoying uh additionally we have things like accessibility features so for example at input uh area um area labeled by uh for example and that's okay we could add that in like this and and that's all all well and good however let's take a look at what the actual output of this is um we're getting errors just because these are we have strict mode on by default so it's saying these fields haven't been defined but they're saying they can never be undefined okay so let's just um in our template here then we'll just do byt in text input okay so that's fine that's rebuilding now and we reload this and here we have our text field okay great so let's try and use that area labeled by for example so aria well one um people expect to use the same attribute name as they would in on a standard input so you'll see this we have to use the rather than using aria labeled by we have to do it in this lower camel ks form um okay now we could fix that uh the way we can do that is by defining in here uh area labeled by and that allows that to work so i can now do area labeled by however this is the key this is one of the main reasons why we don't want to have to do that apart from having to support all the many many options that the text input can have in the browser so we don't have to keep forwarding these on manually um what we do get is a duplicated uh property so you'll see here now the byt text input has aria labeled by and our input child also has aria labeled by so um that isn't really ideal um so i'm just trying to make this a little bit bigger so you can see um as now we have sort of incorrect area in attributes applied on the wrong elements so that's why it is typically a bad idea to use this approach similar to how we use the button we are going to use an attribute selector so let's just undo all these changes because we don't want to go down that road uh what we do want to do is change this selector to use these brackets now again you're going to notice we're getting these errors here from eslint um all we need to do is go into our eslint rc json file and change this to accept attribute selectors and we save that and we can go back now and no complaints great so what we can do now is change this to an input and we can get rid of this um on top of that this also allows us to use ng model without having to do any code at all in our component normally you have to set up control value accessors and things like that we don't have to because ng model works on input controls out of the box which is very nice so it simplifies our code a lot and if we just reload this and now if we inspect it you'll see there's just one element and we have aria labeled by and that works as expected so great let's remove all that keep it nice and simple um excellent so here we have our byt text input now we want to add some styles so i'm going to go ahead and do that again we can target the host element and by default and okay so we've added some default styles here um just to make our text input look a little bit better if we go into our storybook now we can see it looks a little bit like this great so first thing you'll notice is we're getting this ugly blue dark blue line whenever we focus so let's work on changing that and we do that by using the focus pseudo selector i can use the and um here because i'm using sss scss you can if you're using css or um anything like that you can do focus and do your styles in here but i'm not going to do that so the property we're looking for is outline and what we can do is we can set that to none if we want to remove the default browser styling what we probably want to do is we can do border color because we do have a border set so we can um let's add some color and let's just say blue something something like that uh to give an indication that it's going to be focused so let's see yeah and there we have a nice focus outline what we can also do um is we can add a box shadow and if we set it to zero zero which is zero on the x axis or on the y axis and we do we can do a blur uh we can do uh two pixels try four pixels and then we'll do this now this probably won't be exactly what we're after because it's too strong but you can kind of see the effect of what we're doing now the easy and easy way to fix that suppose we can change the opacity as well so we can bring this right the way down and you'll notice this is this is doing a long hex code you can also change this easily by toggling here to get a bit more precise um rgba values so uh there you can see we have kind of a a nicer outline um there now what we also want to support is a placeholder so in our story files let's add placeholder attribute again because we are not forwarding on these values to the some input in our component we don't have to add any inputs for this we can just say enter your name okay and we'll see if we reload this we get this now we also probably want to change the color of the placeholder and we can do that by adding the styles and we can use the placeholder pseudo selector and all we do is set color and let's let's try this it's probably a bit light but yeah not too bad we can make it a little bit darker um drop a time let's try that that doesn't look too bad so you can now see the placeholder which will disappear as soon as i type anything in the box grip excellent next of all we want to support invalid states now we'll probably come back to handling error messages beneath it you know saying it's a required field and stuff like that we'll come back to that but for now what we do want to support is um a red border on the outline and let's look at how we can do that so angular has two ways that we can we can create forms uh our bind form values there's uh template driven forms which is the ng model that you've probably seen and there are reactive forms uh which or you use form groups and stuff like that there and can apply validation rules and stuff like that luckily they both kind of work the same under under the hood um which means we can very easily um handle uh accessing the invalid state so there's a few ways we can do this i'm going to show you both of them um but first of all let's just do um ng model um okay and we're going to bind this to value now what we can do in here is we can we can set you know a default value here and now to use ng model we need to import forms module okay great and then we really reload this there we go you can see john smith has been populated by default which is great now what we do need is we want to be able to get to an invalid state so let's do min length equals three should be that so if i am to inspect this and change the value to a number less than three you will see our length of less than three you'll see we get this ng invalid class and that uh gets applied regardless of whether using ng model or reactive forms so the easy approach is to add styling whenever that class is applied now just you'll you may notice if i remove everything it becomes valid again and you're wondering okay min length is less than three how is this valid it's because if it's not marked as a required field so empty is a valid state uh so i would need to make this field required to show that up but anyway so that is one approach so we could do uh in here uh ng sorry it's now pseudoselector ng invalid and change these properties to let's make it a red and let's just shift the hue so we can uh so you can see here this this is a good way of um changing colors and matching the same uh saturation and lightnesses you can use the hsl um thing i'm gonna change that to something like 20. great okay that's a bit orange actually so let me change it to there let's try that and well i'll just convert this to rgb just to get that code and paste that in there great and we could switch that back if we wanted great so let's see how this looks so if i make this you can now see our field goes red so that's one way of handling uh invalid um what you can do is is you can handle this programmatically so you can you may want to know in code if your field is invalid and it's not too difficult what we can do is we can do constructor private um okay so let's get read only ng control ng control okay so let's just stick a debugger in here and see what we have great so you can see if we inject ngcontrol we get the instance of our form binding our you know our value and we can see property on here if we scroll down for invalid which is exactly what we need so what we want to do is we want to we want to create a getter and we can do invalid and we can return a boolean and we can do return this.ngcontrol.invalid at ni this may be null so we want to do knowledge coalescing we can do that so by default it will be valid and then we what we can do is we can do a host binding and we can just say byt invalids or something like that they're our own class oh sorry that should be class dot byt so that means this will apply this class if it's invalid no let's just change that to byt invalid and we can see this should work as expected yep it does you can see if we look here we're getting the class name brit invalid and one thing we do need to take care of is let's remove ng model so we save that and we now i do this and look at our console we're getting some errors here send note provider for ng control and that's because we are not using ng model but we are saying we want to get the the properties of ng model um however what we can do to work around this is simply go to our text input class and mark this as optional okay and good practice to say this might not be defined that means it'll not throw an error if this provider it doesn't exist um and that is fine so all we have to do is that which is great now if we reload this we don't get any errors um you can start typing create and then if we update our example again to have those properties in make sure our just reload create and then make sure validation works it does so that is how to create a text field uh component again taking advantage of all the built-in browser input features and um showing invalid states and stuff like that thanks for watching please subscribe and hit the thumbs up button if you enjoyed the video and check out our next tutorial

Channel: DevBytes

Views: 554

Keywords: angular, text, input, form, forms, reactive, component, library, nx, nrwl, field

Id: 7-xemXSGKX8

Length: 19min 36sec (1176 seconds)

Published: Tue Jun 01 2021