DEV Community: Ramanan Balamurugan

Angular Form Validation

Ramanan Balamurugan — Thu, 15 Jun 2023 10:21:03 +0000

Introduction:
Angular forms play a important role in creating dynamic and interactive web applications. Whether you're building a simple contact form or a complex multi-step wizard, Angular provides powerful features and tools to handle form validation, data binding, and user interactions. In this post, we will explore the everything we need to know about types of forms in angular and it's validations.

Table of Contents:

1. Angular Forms & Types
2. Template-Driven Forms
3. Reactive Forms
4. Advanced Form Handling Techniques

1. Angular Forms & Types

There are mainly two types of forms we need to know in angular,
i) Template-driven Forms ii) Reactive Forms
Now let's see how to use this forms with example.

2. Template-Driven Forms

This is the type of form that uses ngModel directive to keep track of input using two-way binding.

The form which uses this kind of ngModel mechanism is now called Template-Driven forms.

ngModel and other form related directives are not available by default. So, before we start we need to explicitly import them into our application.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';
import { TemplateDrivenFormsComponent } from './template-driven-forms/template-driven-forms.component';
import { FormsModule } from '@angular/forms'; // <-- import from angular forms


@NgModule({
  declarations: [AppComponent, TemplateDrivenFormsComponent],
  imports: [BrowserModule, FormsModule], // <-- add it here
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

We've enable the Template Driven Forms by adding FormsModule in to our application.

Our First Template-Driven form

<!-- template-driven-forms.component.html -->
<div>
    <h1>Template-driven Form</h1>
    <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
        <div>
            <label>First Name:</label>
            <input type="text" name="firstName [(ngModel)]="user.firstName" required>
        </div>
        <div>
            <label>Last Name:</label>
            <input type="text" name="lastName" [(ngModel)]="user.lastName" required>
        </div>
        <div>
            <label>Password:</label>
            <input type="password" name="password" [(ngModel)]="user.password" required>
        </div>
        <button type="submit" [disabled]="!myForm.valid">Submit</button>
    </form>
</div>

// template-driven-forms.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-template-driven-forms',
  templateUrl: './template-driven-forms.component.html',
  styleUrls: ['./template-driven-forms.component.scss'],
})
export class TemplateDrivenFormsComponent implements OnInit {
  user = {
    firstName: 'foo',
    lastName: 'bar',
    password: 'foo@bar',
  };

  constructor() {}

  ngOnInit(): void {}

  onSubmit(user: typeof this.user) {
    console.log(user);
  }
}

ngForms

You can clearly see that we've created a reference for ngForm template as myForm. ngForm can be only be created for HTML <form> element.

This template is responsible for tracking all the of the form, which contains the value of form fields.

Also ngForm keeps track of the validity state of the form, that depends on the validity state of each of it's form field.

ngSubmit

Next to (ngSubmit) this event prevent the submission form to call backend HTTP POST request, like in the case of a plain HTTP form submit.

ngSubmit directive will ensure that plain form submit not to occur instead it calls onSubmit(myForm.value) function with the value of the form that can be accessed by the reference(myForm) we've created

CSS classes

Angular FormsModule provide css classes to apply style to the input based on the state of the input field.

ng-touched or ng-untouched
ng-valid or ng-invalid
ng-pristine or ng-dirty
These are the six classes provided by FormsModule for each form field in the form.

These validity states can be accessed by,

myForm.{nameOfField}.$touched
myForm.{nameOfField}.$valid
myForm.{nameOfField}.$dirty
// validity state of the form that we used to disable the button
myForm.valid

2. Reactive Forms

A reactive form is pretty much like template-driven form. But in order to achieve this we need to add another module called ReactiveFormsModule.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


import { AppComponent } from './app.component';
import { TemplateDrivenFormsComponent } from './template-driven-forms/template-driven-forms.component';
import { ReactiveFormsModule } from '@angular/forms'; // <-- import from angular forms


@NgModule({
  declarations: [AppComponent, TemplateDrivenFormsComponent],
  imports: [BrowserModule, ReactiveFormsModule], // <-- add it here
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Note that we've imported ReactiveFormsModule instead of FormsModule and that enables us to use reactive forms in our application.

Our First Reactive form

<!-- reactive-forms.component.html -->
<div>
    <h1>Reactive Form</h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div>
            <label>First Name:</label>
            <input type="text" formControlName="firstName">
        </div>
        <div>
            <label>Last Name:</label>
            <input type="text" formControlName="firstName">
        </div>
        <div>
            <label>Password:</label>
            <input type="password" formControlName="password">
        </div>
        <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>
</div>

Note that we haven't used any references of form and we've removed the required validation in and also there is no ngModel.
And That's the magic of reactive forms each and every control of the form is in our hands (i.e) we can control every state and value of each form fields in the TS file of this component.

FormGroup

FormGroup is the main thing we need to know about Reactive Forms and it has the control of every form fields that contains.

// reactive-forms.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-forms',
  templateUrl: './reactive-forms.component.html',
  styleUrls: ['./reactive-forms.component.scss'],
})
export class ReactiveFormsComponent implements OnInit {
  form = new FormGroup({
    firstName: new FormControl('', Validators.required),
    lastName: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

  constructor() {}

  ngOnInit(): void {}
  onSubmit() {
    console.log('reactive form submitted');
    console.log(this.form);
  }
}

We can see that the form is really just a FormGroup, which keeps track of the global form value and the validity state.

Using this form group we can create simple form like this and also any kind of complex forms and even FormArray

FormGroup contain multiple FormControl and that is the name we've used inside HTML <input> tag as formControlName so that we can control that input tag.

This form have all the control over it's form fields like,

form.valid
form.invalid
form.control["firstName"].valid & .invalid
form.control["firstName"].touched & .untouched
form.control["firstName"].pristine
form.control["firstName"].enabled & .disabled
// or we can also get the fields using
form.get('firstName')

The same thing we've done in template-driven forms.

Also it has many features like,

reset() the form.
setValue('') to any form fields.
patchValue('') to any form fields.
setValue('') to form and it need every value of form field.
patchValue('') to form and it doesn't need every value of form field.
setError('') to any form fields.
we can track each input change using .valueChanges.subscribe((value) => {console.log(value)})

FromControl

It is used to create field inside the (FormGroup)[#group].
It contains the fields default value, disabled or enabled state and validation using Validators

new FormControl({value:"",disabled:false}, [Validators.required])

Validators

It is used to validate the form field in many ways like,

Validators.required
Validators.email
Validators.min
Validators.max
Validators.minLength
Validators.maxLength
Validators.pattern // we can create validation using regEx

These validations errors are accessed using the FormGroup.

this.form.errors // will return all the errors in the form
this.form.controls["field-name"].errors // will return errors of particular field

There are many advanced techniques in Reactive forms like,

Form Builder Api
Form Array
Error Handling Let's see these topics in the next post.

Happy Coding 💻 :).

Angular HTTP calls using Angular Service

Ramanan Balamurugan — Sun, 11 Jun 2023 18:59:41 +0000

Introduction:

Angular is a popular Typescript framework by Google used for building web applications. One of the key features of Angular is its ability to make HTTP calls to retrieve data from a server or send data to a server. In this article, we will explore how to perform HTTP calls using an Angular service in a generic way. We will cover the basic concepts, demonstrate the implementation steps, and provide some practical examples.

Table of Contents:

1. What is Angular Service?
2. Setting up a Angular Http Client
3. Making basic Http request
4. Typed Http request
5. Creating an Angular Service
6. Why service and why to make generic?
7. Http call using service
8. Making it Generic

1. What is Angular Service?

Before we dive into HTTP calls, it's important to understand the role of an Angular service. Services in Angular are used to encapsulate and share functionality across components. They provide a way to centralize common logic, such as making HTTP requests, so that it can be easily reused throughout an application.

2. Setting Up the Angular HTTP Client

To begin making HTTP calls, we need to set up the Angular HTTP client. We'll discuss how to import and configure the HTTP client module in your Angular project.

In app.module.ts

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

import { HttpClientModule } from '@angular/common/http';// <-- import HttpClientModule
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,         // <-- add it in import section
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Making basic Http request

After the setup done in app.module.ts file we can jump onto the component

// app.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.scss'],
})
export class HttpComponent implements OnInit {
  constructor(private http: HttpClient) {
  // Basic http GET request
    this.http.get('url to get data').subscribe(
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      }
    );
  }

  ngOnInit(): void {}
}

Inside the constructor HttpClient has to be injected to make http calls using http variable that we used to inject.
http provide basic http calls like GET, POST, PUT, DELETE, PATCH. These are the basic http calls we need.

// GET request
this.http.get('url').subscribe();
// POST request
this.http.post('url', { dataToSend }).subscribe();
// PUT request
this.http.put('url', { dataToSend }).subscribe();
// DELETE request
this.http.delete('url', { dataToSend }).subscribe();
// PATCH request
this.http.delete('url').subscribe();

subscribe() you can see that there is a subscribe function is called on every http calls. subscribe function tells browser to make request to the url with data that you've given. To make it simple creating connection using http and opening/ calling the request using subscribe().
It is required to use subscribe function so that we can get response and error back from the server.

this.http.get('url').subscribe(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
);

Inside this subscribe it gives two outputs either resultObject when the request is success or errorObject when request is failure. Using those object we can handle things further.

4. Typed Http request

Now comes the magic 🪄 of the typescript. We can even get the result as we expected by annotate the request with type.

// creating type for Post
interface Post {
  userId: number;
  title: string;
  body: string;
}

this.http.get<Post[]>('url').subscribe(
  (res) => {
    console.log(res); // <-- this res will be in the type of Post array
  },
  (err) => {
    console.log(err);
  }
);

Since the above get request in annotated with <Post[]>() the subscribe function result in the type of Post[] so the result will in the type of array of Post object and every object will contain userId, title and body.

This goes to all http request.

5. Creating an Angular Service

We can generate a service in angular by,

ng generate service {your-service-name}

6. Why service and why to make generic?

Service is basically used to reduce the repetition of the code in angular. It can easily injected in any component and can directly access the functions variables inside the service.

Now coming to the main point Why http calls have to be in service and why it has to be a generic service.

http calls are repeated in many places.
Since every object commonly have all GET, PUT, POST, DELETE requests, making it a generic service and inheriting it make our work easier, simpler and cleaner.

7. Http call using service

Using generate command create a service.

// post.service.ts
import { Injectable, EventEmitter } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class PostService {

  getPost(id: number): Observable<Post> {
    return this.client.get<Post>(`{apiUrl}/posts/${id}`);
  }

  getPosts(): Observable<Post[]> {
    return this.client.get<Post[]>(`{apiUrl}/posts`);
  }

  putPost(id: number, data: Post): Observable<Post> {
    return this.client.put<Post>(`{apiUrl}/posts/${id}`, data);
  }

  postPost(data: Post): Observable<Post> {
    return this.client.post<Doctor>(`{apiUrl}/posts`, data);
  }

  deletePost(id: number): Observable<Post> {
    return this.client.delete(`{apiUrl}/posts/${id}`);
  }

}

@Injectable tells angular that it is injectable class (i.e) to create a new object of the class.
The class PostService can be injected in any component and the functions like getPost, getPosts, putPost, postPost, deletePost can be used.

// app.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { PostService } from './service/post.service.ts'; // <-- import service

@Component({
  selector: 'app-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.scss'],
})
export class HttpComponent implements OnInit {
  constructor(private post: PostService) { // <-- inject the service
  // Basic http GET request
    this.post.getPosts().subscribe( // <-- use it where ever needed
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
      }
    );
  }

  ngOnInit(): void {}
}

By injecting the service in the component we can access its methods. Since it returns an Observable we need to subscribe it for further computations.

But, the problem is we need to create the same thing for the other objects like Post.

Let's say we need to create a service for Comment. What we need to do is create another service and define everything that we did in post.service.ts. So what we can do is making an abstract Generic service and by inheritance we can easily achieve what we need in easiest way

8. Making it Generic

// generic.service.ts

function createOptions(options: any) {
  if (!options) return '';
  let string = '?';
  Object.keys(options).forEach((key, id, s) => {
    if (s.length == id) string += `${key}=${options[key]}`;
    else string += `${key}=${options[key]}&`;
  });
  return string;
}

export abstract class GenericService<T> {
  private baseUrl = environment.apiUrl;
  constructor(private httpClient: HttpClient, protected apiUrl: string) {}

  public create(resource: Partial<T>): Observable<T> {
    return this.httpClient.post<T>(`${this.baseUrl}${this.apiUrl}`, resource);
  }

  public get(options?: any): Observable<T[]> {
    return this.httpClient.get<T[]>(
      `${this.baseUrl}${this.apiUrl}${createOptions(options)}`
    );
  }

  public getAll(options?: any): Observable<T> {
    return this.httpClient.get<T>(
      `${this.baseUrl}${this.apiUrl}${createOptions(options)}`
    );
  }
  public getById(id: number): Observable<T> {
    return this.httpClient.get<T>(`${this.baseUrl}${this.apiUrl}/${id}`);
  }

  public update(resource: Partial<T>, id: number): Observable<T> {
    return this.httpClient.put<T>(
      `${this.baseUrl}${this.apiUrl}/${id}`,
      resource
    );
  }

  public delete(id: number): Observable<void> {
    return this.httpClient.delete<void>(`${this.baseUrl}${this.apiUrl}/${id}`);
  }
}

By extending this Generic service in every other class we can achieve all the api calls.

// api.service.ts
@Injectable({ providedIn: 'root' })
export class PostService extends GenericService<Post> {
  constructor(private http: HttpClient) {
    super(http, `/posts`);
  }
}

@Injectable({ providedIn: 'root' })
export class CommentService extends GenericService<Comment> {
  constructor(private http: HttpClient) {
    super(http, `/comments`);
  }
}

This PostService and CommentService will provide same functions provided by old service.

By extending this Generic Service we can create as many service we need.

Happy Coding 💻 :).