Reactive Forms In Angular 10
By: Javascript News - Learn Full Stack Js
Tags: Angular 10, Reactive Forms, Angular, Frontend, Front End Development

Introduction

When I was learning Web Development at University: one of the hardest features of Angular Development for me to get a grasp of were Reactive Forms in Angular. When learning: I would often make mistakes that left me wishing I had some kind of guide teaching me how to do Reactive Forms in Angular 10.

Though I’ve long since finished the coding portion of the Web Development degree: I am now in the process of which I am reflecting on what I’ve learned. Though it’s been a wild journey: I believe this single skill may be the most influential thing to learn as a Front-End Developer. Simply put: you have to know Reactive Forms in Angular 10 in order to be an Angular Developer.

Throughout the creation of the internet there has been a birth of a new type of Software Engineer. Oftentimes called the “Self Taught” Developer: this method of learning is a tough one to master. Oftentimes being a “Self Taught” Developer means you have the habit of scouring the internet for different tutorials: seemingly without a strong curriculum in mind. I’ve been there and I actually found my love of coding from this “Self Taught” time of my coding education. I was accustomed to staying up late and scouring Google; Youtube and Udemy for different courses that would help me land my first coding job.

Throughout this journey I alway gave thanks to the Instructors of these courses and appreciated how the education at hand allowed me to sort of leave what was currently going on in my life and allowed me to just relax: and learn!

Though I consider myself a “Self Taught” coder at heart: I believe this book will help many people to learn Reactive Forms In Angular. Whether you want to build a blog for yourself or like me: are searching for your Dream Job in coding: I hope you find this book useful and worth your time and hard earned money.

Without further adieu: I present: Reactive Forms In Angular 10!

Getting Started With Angular 10

To begin with we will start with installing the Angular CLI. This can be done by visiting the Angular Docs: located here: https://angular.io/. If you are new to Web Development: you may wish to install Node; npm and lastly the Angular CLI.

Assuming you already have the Angular CLI downloaded: the first command I will go over is the command to create a new Angular Project. This command is as follows.

Upon issuing this command (given you have the Angular CLI installed): you will then be faced with a prompt. This prompt will ask you a few questions including whether or not you wish to include routing and which styling you wish to use. For the answers to both of the questions I answer Y for Yes. Next for this tutorial we will select CSS for our styling and the Boilerplate Code will be created.

Angular is a component based Library: meaning the application can be built in small pieces and then assembled as if it were legos. In order to generate a new component one is to issue the following command.

A little bit of back story: I have a Mac. Visual Studio Code is a software IDE created by Microsoft and one can use VS on a Mac. The only issue with a Mac is that there is a permissions issue if one does not set the permissions of a file or a folder beforehand. To do so I issue the following command.

This allows for the file to be edited in VS Code. Next in our app.component.html file..

Here I include the component I just created with the use of the app-form element. This is another step in using components. One can create components and use them with the following method. How it works is one is to write “app” then the name of the component: which I named “form”. So the HTML Element is then named “app-form”. This should allow one to view the contents of the form component.

Creating The Angular Material Form

Next I will create the Angular Material Form. First to use Angular Material: one is to install Material using the following command.

This will allow for there to be a prompt and the colors will then be chosen. For this project I am choosing the Indigo/Pink color scheme.

From there: two more questions will be prompted. These two questions are referring to Typography Styles and Browser Animations. I answer no to both questions.

From there I chown the “src” folder: allowing for the editing of the files in the “src” folder.

Now in the app.module.ts I will import the MatFormFieldModule and the MatCardModule.

The MatFormFieldModule is imported as such.

The MatCardModule is also imported as so.

Finally both of these modules can be added to the imports array in the app.module.ts file like so.

Now I’m going to build the form with HTML. This is going to take place in the form.component.html file.

The HTML for this is very simple. It looks like so.

Basically it uses a mat-card element to create a form with the mat-form-field and matInput elements. This form will ask for a number and then it will output it to the console. Notice how formControlName is used to get the data from the input.

Now back in the app.module.ts file the ReactiveFormModule and FormsModule will be imported.

First both modules will be imported at the beginning of the app.module.ts file like so.

Then both of these modules will be imported into the imports array in the app.module.ts file like so.

Now in the form.component.ts file I will import all the necessary components for Reactive Forms In Angular 10.

Again I am I import FomBuilder, FormGroup, FormControl and Validators from @angular/forms

Now above the constructor inside of the Class module the exampleForm will be declared with the value of FormGroup and a type of any.

Now one can add the FormBuilder instance inside of the constructor as a private variable labeled “fb”.

Now in the ngOnInit method one can declare the contents of the form by allowing the exampleForm to equal the “fb” instance. Notice how FormControl is used.

Next one can define an exampleObject of type any above the constructor like so

A submit function is then created outside of the ngOnInit method and still inside of the FormComponent Class.

Then inside of the submit function I then get the data from the form by defining the exampleForm instance and then get-ing the formControlName name. Remember to use .value!

Now I console.log the example object to be viewed in the browser.

Running the application

Now to serve the application in a browser one is it run the following command in the root directory of the Angular Project.

Now open up your browser and navigate to the uri below.

In order to view the console in Firefox: one is to navigate to the Dev Tools. This can be

done by clicking the hamburger menu in Firefox.

Then navigate to the Web Developer option in the drop-down menu.

Then from there navigate to the Web Console and this is the Dev Tools for Firefox!

Back to the application: the view of it in the browser should look like so.

Then in the console: when the “Enter” button is pushed: one is able to see the exampleObject outputted to the console.

Bonus: adding http to our application

Now I am to create an interface file with the following name.

Now I create the exampleObject interface. It has one field: this is “number”. It is of type number.

Let’s create a service! To do so one uses the following command.

Remember to chown the “src” folder to allow it to be edit-able!

Now in the app.module.ts I import the following Module.

This is to be added to the imports array in the app.component.ts file.

Then in the http.service.ts file…

One is to import HttpClient; exampleObject and rxjs Observable.

The HttpClient Module can then be added to the constructor of type private and with the name of http.

Now in http.service.ts file the post method can be created. Notice how it has one parameter: data; of type any. It also uses rxjs Observable and the interface to output this data.

In the form.component.ts file one is to import the httpService.

Then the httpService is to added to constructor as type private and name http.

Then in the submit method…

The service is then used to send data to the server in the form of a post request. Notice how Angular’s Subscribe method is used to create a callback for the data that outputs the error or a message.

Conclusion

In conclusion: becoming a “Self Taught” Programmer is not any easy feat. Although here are a few parting tips.

First would be to join a MeetUp! There are many different MeetUps likely in your area! These coding meetups can help get their foot in the door with employers and people who work in the field.

My second tip is to find a curriculum online that defines the “roadmap” for your success in learning how to be a Developer. These can be found on Medium or in Google.

Thank you for taking the time to read this book! If you have any constructive questions or comments please reach out to my email: bmulhern2@comcast.net. Thank you!