Angular Reactive Forms-Login Form Made Simple – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by vetriselvan Panneerselvam

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">
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" formControlName="username" placeholder="Enter your username">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" formControlName="password" placeholder="Enter your password">
  </div>
  <button class="form-submit-btn" type="reset">Reset</button>
  <button class="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
SUBMITTED
UNSUBMITTED
PRISTINE

To check the status of the form:

 @if(loginForm.get('username')?.touched && loginForm.get('username')?.errors?.['required']) {
        <span class="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
loginForm.submitted: true if the form has been submitted
loginForm.unsubmitted: true if the form has not been submitted

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.