Hey Devs,

As frontend developers, we often need to create forms. In fact, building a form is usually one of the first things we do when learning a new framework. One of the most common forms is the login form. In Angular, there are two main ways to handle forms:

• Template-Driven Forms
• Reactive Forms

Template-Driven Forms are the older approach, where validation is handled in the template. We’ll explore this method in a separate blog post.

Reactive Forms, on the other hand, are the preferred way to handle forms in Angular. They allow you to:

• Handle validation in the component
• Easily build complex forms
• Test, reuse, and maintain your code more effectively

Let me show you how to create a login form in Angular using Reactive Forms.

A form consists of a collection of FormControls—these are basically the input fields. The form itself is bound to a FormGroup, which contains these FormControls.

Let’s start with a simple login form example.

Our login form will have two input fields:

• Username
• Password

And two buttons:

• Login
• Reset

We’ll create a FormGroup with two FormControls: username and password. The easiest way to do this is by using FormBuilder, a service that helps you create FormGroups.

You can inject FormBuilder into your component like this:

formGroup:FormGroup=this.formBuilder.nonNullable.group({username:['',[Validators.required]],password:['',[Validators.required]],});

The nonNullable property ensures the FormGroup doesn’t accept null values.

• username is a FormControl for storing the username.
• password is a FormControl for storing the password.
• Validators.required ensures both fields are filled in.

In your HTML, the form might look like this:

<form[formGroup]="loginForm"(ngSubmit)="submit()"class="form"><divclass="form-group"><labelfor="username">Username</label><inputtype="text"formControlName="username"placeholder="Enter your username"></div><divclass="form-group"><labelfor="password">Password</label><inputtype="password"formControlName="password"placeholder="Enter your password"></div><buttonclass="form-submit-btn"type="reset">Reset</button><buttonclass="form-submit-btn"type="submit">Submit</button></form>

Now, let’s handle validation messages in the HTML.

To show an error message when the username is required:

<span*ngIf="loginForm.get('username')?.touched && loginForm.get('username')?.errors?.['required']"class="error-message">  Username is required</span>

This way, the error message only appears after the user has interacted with the field (i.e., when it’s touched). You should handle the password field in the same way.

For form submission, your component might have:

submit(){console.log(this.loginForm.value);// Handle form submission here}

Let’s talk about the reset button. By setting the button’s type to "reset", the form will reset automatically when clicked. Alternatively, you can reset the form programmatically:

reset(){this.loginForm.reset();}

Now, let’s discuss the status of a FormGroup.

A FormGroup has a status property, which can be one of the following:

• PENDING
• VALID
• INVALID
• DIRTY
• TOUCHED
• UNTOUCHED
• PRISTINE

To check the status of the form:

 @if(loginForm.get('username')?.touched&& loginForm.get('username')?.errors?.['required']) {<spanclass="error-message">Username is required</span>    }

Or, you can use these boolean properties:

• loginForm.valid: true if the form is valid
• loginForm.invalid: true if the form is invalid
• loginForm.dirty: true if the form has been modified
• loginForm.pristine: true if the form is unchanged
• loginForm.touched: true if any field has been touched
• loginForm.untouched: true if no field has been touched

📁 Want the Full Code?
If you'd like to reference the complete code used in this blog, you can find it at the bottom of the post. It includes everything from the component setup to the HTML template and validation logic — perfect for copy-pasting or experimenting in your own project.

Source

Conclusion:

I hope this helps you understand the basics of Reactive Forms in Angular. In the next blog, we’ll dive deeper into events, validation, and custom validators.

💬Got questions or use cases you want to share? Drop a comment below! Let's discuss more Angular magic. ✨

✍️ Author:Vetriselvan

👨‍💻 Frontend Developer | 💡 Code Enthusiast | 📚 Lifelong Learner | ✍️ Tech Blogger | 🌍 Freelance Developer