Angular Forms – A Guide to Learning Angular (Part 7)

Forms in Angular are an essential aspect of building dynamic and interactive web applications. In this tutorial, we will dive deep into forms in Angular and learn how to create and work with them effectively.

There are two types of forms in Angular, template-driven forms, and reactive forms. In this tutorial, we will focus on template-driven forms as they are easier to understand and implement for beginners. Template-driven forms rely on directives in the template to create and manage form controls. Reactive forms, on the other hand, are more flexible and powerful but require a more complex setup.

To get started with forms in Angular, we first need to create a new Angular project. If you have not already set up an Angular project, you can do so by running the following command in your terminal:

ng new my-project

Once your project is set up, navigate to the project directory and open it in your code editor. To create a new form in Angular, we need to first import the FormsModule module in the app.module.ts file. Add the following import statement at the top of the file:

import { FormsModule } from '@angular/forms';

Next, add the FormsModule module to the imports array in the @NgModule decorator:

@NgModule({
  imports: [
    // other modules
    FormsModule
  ]
})

Now we can create a new form in our component template. Open the app.component.html file and add the following code:

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" ngModel required email>

  <button type="submit">Submit</button>
</form>

In this form, we are using the ngForm directive to create a new form instance and the ngModel directive to bind form controls to properties in our component. We also added the required and email validators to the email input field.

Next, open the app.component.ts file and add the following code to handle form submission:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log(form.value);
    }
  }
}

In this code, we created a method called onSubmit that takes the form instance as an argument. We check if the form is valid before logging the form values to the console.

Finally, to display form validation errors in the template, we can use the following code:

<div *ngIf="myForm.controls['name'].invalid && myForm.controls['name'].touched">
  <p>Name is required.</p>
</div>
<div *ngIf="myForm.controls['email'].invalid && myForm.controls['email'].touched">
  <p>Email is required and must be a valid email address.</p>
</div>

In this code, we are using the *ngIf directive to conditionally display error messages based on the validity and touch state of the form controls.

And that’s it! You have now successfully created a template-driven form in Angular. You can further customize and enhance your form by adding more form controls, validators, and error messages.

In conclusion, forms are an essential part of building interactive web applications in Angular. By following this tutorial, you should now have a good understanding of how to create and work with template-driven forms in Angular. Remember to practice and experiment with different form features to become more proficient in working with forms in Angular.