Angular Basics-10

Angular

Welcome to part-10 of Angular Basics series. In this part , we will learn about Reactive approach to create forms in Angular.

The starting point can be taken from here.

We have a simple html form in the project, which we are going to change into Angular reactive approach.

localhost

The first thing we will do is to change the FormsModule to ReactiveFormsModule in app.module.ts file.

app.module.ts

Now in app.component.ts file we will add the signupForm and then in ngOnInit add the username, email and gender.

We also have an onSubmit to console log the signupForm.

app.component.ts

Now, in app.component.html file add the formGroup, ngSubmit and formControlName and we are done.

app.component.html

Now, in localhost when we add values and submit the form, we will get the values.

localhost

Now, we will add validators in our project and for this first in app.component.ts file, add Validators in FormControl.

app.component.ts

Next, in app.component.html file, we will add get methods to check whether the username or email is valid.

app.component.html

Now, in app.component.css file we will add the class to show the red border on error.

app.component.css

Now, our validations are working perfectly on localhost.

localhost

Now, we will complete our form by getting the default values in it, by using the setValue in ngOnInit. We are also resetting the form after the user submits it.

app.component.ts

Our app is complete now and the default values are been selected and the reset also working properly. The code for the same can be taken from this github repo.

localhost

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

next-export-i18n v1.3.0: respecing the user’s default language

Outsourcing ReactJS Development Services | Learn How To Do It Right

YouTube Video | JavaScript Form Validation

Theming in React Using SASS Variables

WordPress Sage issue with tailwindcss

How the TypeScript Parameters Type Works

What is the Fetch API in browser and why does it exist?

The difference between .innerText, .textContent and .innerHTML

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Disable button after a click in angular using directive

How to Manage Password Strength — Angular

How to Manage Password Strength - Angular

A sweet Introduction to NgRx Angular

Lazy Loading in Angular Js