Reactive forms in Angular the way to go

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
I’ve been using Angular for years and really appreciate how you break concepts down into bite-size chunks. Great job and thanks for sharing!
Hey Braydon, A cool name by the way. Thank you so much, means a lot, I come from Angular pre 5 so now jumping into 10 is like a whole new world! It's cool to see I'm not talking bullshit haha
I appreciate it!
Aha, the good ol Angular 4 days ;)
Followed -looking forward to more articles :)
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

When you are using Angular and need to have forms in your application, use reactive forms, they are so powerful.
They are a model-driven way of using forms in Angular.
The instance I'm using for reactive forms is a create/update component. One component that can do both based on what it receives.

First, we need to register the ReactiveFormsModule to our app.module.ts.
// Other imports
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
// Other import
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
That's it. We can now use reactive forms in our application.
Let's use our welcome.component to populate a form.
Within reactive forms, we have a concept of using FormGroup that will have controls in them. One form can then have multiple FormGroups.
So let's start by adding a basic form.
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent {
ourForm = new FormGroup({
firstName: new FormControl('', Validators.required),
lastName: new FormControl(''),
});
}
As you can see, we build a new form-group that holds two fields, a firstname, and a lastname. We then also add a required validator, which comes from angular forms. The basic required will just check if the field has any value.
Then we can add this to our welcome.component.html.
<form [formGroup]="ourForm" class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
<label class="block mb-2 text-sm font-bold text-gray-700">
First Name:
<input type="text" formControlName="firstName" class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
</label>
<br />
<label class="block mb-2 text-sm font-bold text-gray-700">
Last Name:
<input type="text" formControlName="lastName" class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline">
</label>
<p>
Values: {{ ourForm.value | json }}<br />
Form valid: {{ ourForm.status }}
</p>
</form>
We are using some simple tailwind classes to style our form.
Then we put our [formGroup] on the form element.
And render our two input fields, they are connected to our form by using the formControlName="firstName" which has to be the same as defined in our ts file.
Then at the bottom, we render the form values and if the form is valid or not.
If you now run this, you will see the two inputs and have the option to see the values.

This is cool, but of course, we wish to capture this data when we click the button.
Let's start by adding a submit handler to our form.
<form [formGroup]="ourForm" (ngSubmit)="onSubmit()" class="px-8 pt-6 pb-8 mb-4 bg-white rounded shadow-md">
This will call the onSubmit function.
Let's add this function to our welcome.component.ts.
onSubmit() {
console.log(this.ourForm.value);
}
Now let's add a button that will act as our submit.
<button type="submit" [disabled]="!ourForm.valid" class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline">Submit</button>
As you can see, we can add this [disabled] element if our form is not valid.
Now, if you run this code, you will see the form values in your console and process the data!
You can download the full code to this article on GitHub.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter