Angular forms with GitHub example — tutorial 1: basic form

Angular form tutorial presented by Ramin ahmadi https://www.linkedin.com/in/raminahmadi/ or https://medium.com/@raminahmadi
Angular form tutorial presented by Ramin ahmadi https://www.linkedin.com/in/raminahmadi/ or https://medium.com/@raminahmadi

Angular applications usually include different types of modules. Generally, you’ll have your app module and some other modules such as shared or Angular material, if you choose to use it. For this tutorial we need Angular’s FormsModule. Here I’m gonna show you how to add the FormsModule to our demo app. But first we need to make an angular app. Use below command to make your app or head over to my Github page and download the angular-forms tutorial app.

and then add Angular material via below command or checkout the official getting started page at https://material.angular.io/guide/getting-started.

We import FormsModule from @angular/forms, which is built into Angular so you don’t need to download any npm package for it. Now that we have access to FormsModule we use it in our imports form methods. we did this so that Angular would be aware of any forms or template we’re going to use, and take over some control of the form. Let’s add FormsModule to a brand-new Angular app that you just made. We need to go to the src, app folder, and then app.module .ts file. I’ll add the import, and here’s our import section as indicated in code commit below.

https://github.com/ramin-ahmadi/angular-forms/commit/b4da03b94c29c2e80479cf80c138379f8cc27c4b

Now let’s create a form, and by that I mean an Angular component that contains a form. To get to the Terminal on VsCode, press Ctrl, shift and back tick. Then to use the CLI you’ll need to execute ng, g (generate), c (component), and the name of the component, say details-form.

https://github.com/ramin-ahmadi/angular-forms/commit/3e33498212ff46ad1ec3daad0064472b90dde047

The selector is <details-form>, and you’ll go with that. Just to see if it works, I’m gonna copy it, and we’ll go to our app.component .html file, and do a clean-up and I’ll add the details form here.

Okay, let’s have a look at the rendered app again while ng serve is running. it’ll serve up the application so that we can view it in the browser. If the server is not running type below command in a new terminal window.

if the server is already running, saving code change will automatically refresh in the browser and you should be able to see details-form works! Message in a blank page.

If you see something like above image it means everything is up and running fine. Now it’s time to create our form. you’ll need to go to details-form.component.html file and make a simple form right there. So for our simple form where user input first name and last name, and there’s an save details button, we need to add material forms so it looks good! First thing is to add necessary modules for input and button to our app module.

If you are not familiar with Angular material, use below link to learn more:
https://material.angular.io/components/categories

Then let’s add form elements to details-form component. Just get the copy for input from below link.

https://material.angular.io/components/input/examples

and code for button from here

https://material.angular.io/components/button/examples

and finally, below commit contains everything you need if you had difficulty adding material elements.

Now save it and let’s view it in the browser. And there you go there is your first form. It doesn’t do anything yet, but throughout this tutorial you’ll be building it up with me. If we used Chrome’s dev tools (press F12 button) to inspect the page you will see the form tag, and how Angular is managing it. Noticed how Angular added a novalidate attribute there. Pretty cool isn’t it? Angular put it there to shut down the browser’s internal validation.

Don’t worry about it yet. I’ll cover that in my next post. once again, here is the link to angular-forms tutorial app.

Full stack front-end developer. I make it a goal to automate myself out of routine tasks. My motto is, 'write human readable code, lean and clean'.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store