Angular CRUD – How to insert data using API in Angular 16 CLI with Form Validation

In this tutorial, we will learn how to insert data using an API in an Angular 16 CLI project with form validation. Angular is a popular framework for building single-page applications, and CRUD operations (Create, Read, Update, and Delete) are essential for any data-driven application.

Step 1: Set up Angular 16 CLI project

If you haven’t installed Angular CLI yet, you can do so by running the following command:

      
        npm install -g @angular/cli
      
    

Once the Angular CLI is installed, you can create a new Angular project using the following command:

      
        ng new my-angular-app
      
    

Step 2: Create a form for inserting data

Now, let’s create a form for inserting data in our Angular app. We will use Angular’s built-in form validation to ensure the data entered by the user is valid. Here’s an example of how to create a simple form in Angular:

      
        <form (ngSubmit)="onSubmit()" #insertForm="ngForm">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name" [(ngModel)]="formData.name" required>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email" [(ngModel)]="formData.email" required>
          </div>
          <button type="submit" class="btn btn-primary" [disabled]="insertForm.invalid">Submit</button>
        </form>
      
    

Step 3: Handle form submission and insert data using API

Now that we have created a form, we need to handle the form submission and insert the data using an API. We can use Angular’s HttpClient module to make HTTP requests. Here’s an example of how to handle form submission and insert data using an API in Angular:

      
        import { Component } from '@angular/core';
        import { HttpClient } from '@angular/common/http';

        @Component({
          selector: 'app-insert-data',
          templateUrl: './insert-data.component.html',
          styleUrls: ['./insert-data.component.css']
        })
        export class InsertDataComponent {
          formData: any = {};

          constructor(private http: HttpClient) {}

          onSubmit() {
            this.http.post('http://api.example.com/insertData', this.formData)
              .subscribe((response) => {
                console.log('Data inserted successfully', response);
                this.formData = {};
              }, (error) => {
                console.error('Error inserting data', error);
              });
          }
        }
      
    

Now, when the form is submitted, the data will be sent to the API endpoint ‘http://api.example.com/insertData’ using the POST method. If the API request is successful, the ‘Data inserted successfully’ message will be logged to the console, and the form will be reset. If there is an error, the ‘Error inserting data’ message will be logged to the console.

With these steps, you have learned how to insert data using an API in an Angular 16 CLI project with form validation. You can now build a fully functional CRUD application using Angular! Stay tuned for the next part of this tutorial, where we will learn how to retrieve and display data using an API in Angular.