Learn Material Design in Angular. Inputs

By now you’ve already seen how Material treats inputs. But did you know that you can create a lot more inputs, including inputs for color, date, email and telephone with Material? Here’s a list of the inputs supported by the Mat Input Directive in Angular Material.

In fact, this isn’t even the full list, this is just some of the features. In addition, Angular Material provides us with some really great features to make our inputs more responsive and user friendly.

We can provide hints, error messages, auto-resizing and more to each input. Let’s return to our application now and add a new customer form to highlight some of these input features in Angular Material.

Also learn Node js design patterns

Returning to Visual Studio Code, let’s create the new customer component that we’re going to use to add our inputs. I’m going to use the NG Generate Component customers/customer-new command. That’s going to create my new, new customer component. Now let’s command p, and let’s go to the Customers Module and let’s add some required libraries that we’re going to need for our component. First thing I’m going to need is the FormsModule. We’re going to want to have some validation. And we’re going to need to import the FormsModule, as well as the ReactiveFormsModule from @angular/forms.

And I’m going to go ahead and copy those from line three and go down to our import statement and I’ll post those on line 19, and I’ll add a comma at the end. Put these on their own line. And we’re going to add some more material-related stuff, and I see here that my CustomerNewComponent on line 13 is in the wrong position so I’m going to alt up which is a handy shortcut. I’m going to move that up to the components I’ve created. Now in the material folder here we’re going to add the new module which is MatInputModule from @angular/material/input.

And once again I’ll copy that module name and I’ll go down to my material imports. I’ll add that at the end of the list, and now that I’ve done that I’ll need to control p and go to the customers-routing.module, and we need to add our new route. So the first I’ll need to do is import that new component. So on line five I’m going to import the CustomerNewComponent from customer-new/customer-new.component. Okay, now that we’ve saved that I’ll copy the name on line five and I’m going to add a new path here.

So I’ll put a comma there and we’re going to do the new path is going to be new and the component will be, component will be our CustomerNewComponent. Now let’s go ahead and npm start and just make sure that our component works correctly before we add material pieces. Returning to my customers new path I see that the new customer module works and now I can add my material components. Returning to Visual Studio Code I can go ahead and start adding my input. So I’m going to command p and go to the customer-new.component.html.

And let’s just clear out the autogenerated content and let’s put everything inside of a mat-card on line one. Inside the mat-card we’re going to add our mat-card title and our mat-card-content as well as our mat-card-actions. I find that putting things in the card like this looks really nice and clean. And on the mat-card-title on line two we’re going to call this New Customer. And inside of our content this is where we’re going to add our form.

So let’s go ahead and add a form in here. And I’m going to add a mat-form-field class full-width, which is an input and use the matInput directive. The placeholder will be email. And I’m going to add a new directive here in brackets called formControl=emailFormControl. And then I’m going to add an errorStateMatcher, and in quotes I’ll go ahead and put matcher there. And now let’s add some hints.

I want to add a hint align at the end that says that Hint email@domain.com and I’m going to add an error message as well, mat-error align at the end. This will replace the hint if the input is in an error state and we’re going to say Please enter a valid email address, and we’re going to add some logic here for when that shows up. This should show up when the emailFormControl.hasError email and the emailFormControl.hasError required.

So we could add a required and we could do an email one here if we wanted to. So now that I’ve saved that let’s control s to save or command s to save and command p, and let’s go up to the customer-new.component.ts and let’s go ahead and actually add the code behind this. So I need to import some stuff here on line two. Let’s import the FormControl as well as validators from @angular/forms, and let’s move down to line 10 and let’s add a property here called emailFormControl, which is going to be a form control.

And moving down to the ngOnInit I’m going to go ahead and initialize this FormControl = newFormControl and I’ll put some properties in here. We’re going to say Validators required and Validators.email. Now that we’ve done that let’s try running our application. Everything compiles. Let’s see what we’ve got. Okay, we have a customer form here. It doesn’t look great. It definitely needs some styling help. So why don’t we return to Visual Studio Code and see how that works.

So I’m going to go ahead and open up the customer new using command p customer-new-component.css. And I just want to add a mat-card style. We’re going to make this card 600 pixels, and we’re going to center it with margin:auto. And I’m going to add one more class here, mat-card space full-width. That means that every time we create a component that’s considered full width it should take up the entire part of the screen. Let’s go back. Okay, now we have a better looking email. Now notice I have my hint down here, email@domain. Well what happens if I put in something not valid? Please enter valid email address.

So I’ve added some on change validation already that makes sure that this input is actually an email address. Let’s add some more. Returning to Visual Studio Code, let’s go ahead and add some more form fields below our email. So we’ve showed you how to do validation, now let’s go ahead and add a form field in here, and we’re going to use input, and we’re going to say this is a matInputp directive. And we’ll put a placeholder on this and we’ll call this First, for a first name. And let’s go ahead and copy this one four or five more times.

I did five. Let’s go First, Last Address, Phone, and how about Fax just for fun. Now that we’ve done that I’m going to go ahead and command p and do greater than and do format document to line these up a little bit. Now what can we do with these fields? Well, with my address field, let’s go ahead and make this full-width. So class equals full-width. And that’s from our css file. And let’s just change this input on line 20 to a text area. And now going down a little bit more, notice on Phone here on 23 what can we do here? Well, let’s go ahead and make it full-width as well, but let’s add a prefix to it.

And let’s see, if I wanted to do a span I could use the matPrefix directive on line 23. And let’s say we wanted to do +1 for the country code on this one. And what about over here on the Fax? What if I add another mat-icon over here and I use the matSuffix, and I use a phone as the icon here. Let’s see what this looks like. Our application compiles and I save. And I alt tab over to there, and I see that I need to navigate to customers/new. And look at this, we’ve got a pretty nice looking form now with an email that validates, a first, a last, and I’ve also got a multi-line address field, which I can now use with the enter key.

And then I can tab over to phone, and I’ve got the prefix here of the country code, and I can go ahead and just put in some numbers here if I wanted to, and I could add more validation if I wanted to be stricter about this. And I’ve also put a suffix on our fax with an icon. So if you want to do that as well, and of course you could make those icons buttons to have actions like clear if you wanted to.


Please enter your comment!
Please enter your name here