Angular forms with GitHub example — tutorial 1: basic form


Ramin Ahmadi

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.

ng new angular-forms

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

ng add @angular/material

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.

ng g c 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.Adding details-form to app component · ramin-ahmadi/angular-forms@a858f5f

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.

ng serve -o

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.

import {MatInputModule} from '@angular/material/input';import {MatButtonModule} from '@angular/material/button';

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.Adding form tag to details-form component · ramin-ahmadi/angular-forms@b401153

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.

Ramin Ahmadi

Written by

Ramin Ahmadi

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’.

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

Angular forms with GitHub example — tutorial 1: basic form

log in

Captcha!

reset password

Back to
log in
Font Resize
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format