One of the most important components in Angular Material is the input component. Angular Material supports different types of input elements like color, date, email, month, number, password etc. In this article, we are going to use the input components to create a Create-Owner component and use it to create a new Owner object in our database.

Of course, we will show how easy it is to apply form validation with the material input components and also how to create dialogs to show the error or success messages. We won’t dive deeply into the validation logic because we already have a great article that covers that topic .NET Core 2.0, Angular and MySQL Form Validation.

For the complete navigation and all the basic instructions of the Angular Material series, check out: Introduction of the Angular Material series.

The source code is available at GitHub Angular Material Form Validation – Source Code

Let’s start step by step.

We are going to divide this article into the following sections:

Owner Component and  the Routing Configuration

To create our new component, we have to type a familiar command:

owner creation - Angular Material Form Validation

Once we have our component created, let’s configure the routing part in the owner-routing.module.ts file:

Finally, let’s modify the owner-list.component.html file, to add the link that will point to the owner-create component:

Now we can inspect our result:

create added to owner component - Angular Material Form Validation

And if we click on the Create Owner button, we are going to be directed to the owner-create component for sure.

Adding Material Inputs and Form Validation

Before we start adding input fields, we need to import one more module into the owner.module.ts file:

We need this module for the reactive form validation.

In addition to input components, we are going to use the datepicker material component and for that, we need the MatDatepickerModule and MatNativeDataModule inside the material.module.ts file:

After all these imports and registrations, we can start with the owner-create.compnent.html file modification:

The mat-cart-content and mat-cart-actions elements need to be wrapped with the form tag:

Then inside the mat-card-content tag, we are going to add the following code:

Finally, let’s modify the mat-card-actions element:

We have completed the HTML part, and we are ready to modify the owner-create.component.ts file. But before we do that, we are going to create a new interface OwnerForCreation:

Right after that, we are going to modify our .ts file:

The last thing we need to do is to modify the .css file:

Excellent. Let’s check our result:

create component finished - Angular Material Form Validation

Adding Dialogs and Shared Module

We have finished the owner component creation but we need to inform a user about the creation result, whether it was successful or not. For that purpose, we are going to create two dialog components. One for the success message and another one for the error message.

Shared Module

Before we do that, we are going to create a shared module to register our dialog components and to register modules that are already registered inside the app module and owner module as well.

So, let’s create a shared module first:

Now, let’s modify the shared.module.ts file:

Important: Because we now have the FlexLayoutModule and MaterialModule inside of the shared module file, we don’t need them anymore in the app and owner module files. Therefore, we can remove the FlexLayoutModule and MaterialModule imports from the app and owner module files and just import the SharedModule in both mentioned module files (app and owner).

Dialogs Creation

To continue, we are going to create our dialog components:

dialog components creation

These modules are imported automatically in the shared.module.ts file, but we need to export them as well. Moreover, we need to place the dialog components inside the entryComponents array because we are not going to use routing nor app selector to call these components. We are going to use them as a template reference for the dialog’s open() function and thus the need for the entryComponents array:

Success Dialog Modification

Let’s open the success-dialog.component.html file and modify it:

One important thing to notice here is a usage of the mat-dialog-close attribute which instructs this button to close the dialog and submits a result (true in this case). To fetch this result, we need to subscribe to the afterClosed() function. We are going to do that a bit later.

We haven’t used the mat-dialog elements in our project, therefore we need to register it in the material module:

Now, to use this success dialog, we are going to modify the owner-create.component.ts file. Our dialog needs to have a configuration, and we are going to provide that:

To start our success dialog, we need to import MatDialog and to create a private variable in a constructor of the same type.

The dialogConfig object consists of several properties which describe the height, width, disable close dialog when clicking outside of the dialog and passing data to the dialog. Because we don’t want to pass anything to the success dialog, we have left an empty data object.

Now, let’s modify the subscribe part of the component, to call this dialog:

This is the result:

success dialog

Error Dialog Modifications

We are going to send an error message to the error dialog and we don’t want to emit any event when we click the dialog button, therefore the Error dialog implementation will be a little different.

Let’s start by modifying the error-dialog.component.ts file:

The dialogRef variable is here to help us manipulate our opened dialog and the data variable is here to accept any information passed to this component. Of course, we must use the MAT_DIALOG_DATA injection token to enable data acceptance from other components.

Now, we have to modify the error-dialog.component.html file:

Having that done, let’s modify the error-handler.service file:

And finally, let’s modify the owner-create.component.ts file:

And that is all. Now, we can check the result:

error dialog completed

Conclusion

Excellent.

We have created a lot of features and covered a lot of material components. We have left out the update and delete functionalities, but this is something that you could do on your own now as an exercise.

In all the previous articles, we have covered all the material related logic we need for the Update and Delete actions (Forms, Validations, Input Fields, Dialogs etc) and in .NET Core 2.0, Angular and MySQL. PUT Actions and .NET Core 2.0, Angular and MySQL. Delete Actions we implemented all the required Angular related logic.

Of course, if you have any problem creating new functionalities, we have provided the source code for that as well.

So, feel free to read them, if you haven’t already, and make your own Update and Delete parts of this project.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.