DEV Community: Ricardo Torres

Angular Forms

Ricardo Torres — Wed, 29 Jun 2022 02:16:04 +0000

If you started learning Angular from version 1 (AngularJs), maybe you will be more familiarized with configuring a clean Html to handle states and validations in the form. This approach is known as Template-Driven Forms.

In contrast Angular count with Model-Dirven Forms or Reactive Forms which delegates most of the responsability to apply validations and keep states (valid, invalid, touched and dirty) in the form over an object called FormControl located in the TypeScript and not in the HTML like the Template-Driven Forms.

Template Driven Forms

Reactive Forms

This powerful module provides a way to define a form as a FormGroup in the TypeScript class to handle states and validations rules that will be associated to each input in the form throught a formControlName.

Personally, I think that both are good ways to create Forms in Angular, but your decision over one or another approach is up your needs, the complexity of the forms, if you must create smalls forms with a low complexity you can use Template-Driven Forms, but if you need to create complex forms with Unit test, Reactive Forms will be a smart decision.

Let's create our first Reactive Form.

Open your console and type:

ng new reactive-forms

? Would you like to add Angular routing? (y/N) y

cd reactive-forms

cd .\src\app

Import the module ReactiveFormsModule in the app.module.ts

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layout/header/header.component';
import { FooterComponent } from './layout/footer/footer.component';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, HeaderComponent, FooterComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, ReactiveFormsModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Create a folder inside app named components and create a component called create-fruits

ng g c create-fruits

Define the structure of the Form in the class CreateFruitsComponent

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Record } from 'src/app/model/record';

@Component({
  selector: 'app-create-fruits',
  templateUrl: './create-fruits.component.html',
  styleUrls: ['./create-fruits.component.scss'],
})
export class CreateFruitsComponent implements OnInit {
  title!: string;
  form!: FormGroup;
  fruit!: Record;

  constructor() {}

  ngOnInit(): void {
    this.form = new FormGroup({
      name: new FormControl('', [Validators.required]),
      description: new FormControl('', [Validators.required]),
      image: new FormControl('', [Validators.required]),
      price: new FormControl(0, [Validators.required]),
    });
  }

  onSubmit(): void {
    console.log(this.form);
  }
}

As I mentioned before, defining the form in the TypeScript provides a good way to handle the states of our form and all the formControls inside it.

create-fruits.component.html

<section class="section">
  <div class="container">
    <h1>New Fruit</h1>
    <div class="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label class="label">Name :</label>
        <input
          type="text"
          id="name"
          formControlName="name"
          placeholder="Name"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['name'].dirty || form.controls['name'].touched) &&
            form.controls['name'].errors &&
            form.controls['name'].errors['required']
          "
        >
          Name is required!
        </p>
      </div>

      <div class="form-group">
        <label class="label">Description :</label>
        <input
          type="text"
          id="description"
          formControlName="description"
          placeholder="Name"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['description'].dirty ||
              form.controls['name'].touched) &&
            form.controls['description'].errors &&
            form.controls['description'].errors['required']
          "
        >
          Description is required!
        </p>
      </div>
      <div class="form-group">
        <label class="label">Image :</label>
        <input
          type="text"
          id="image"
          formControlName="image"
          placeholder="Image"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['image'].dirty || form.controls['name'].touched) &&
            form.controls['image'].errors &&
            form.controls['image'].errors['required']
          "
        >
          Image is required!
        </p>
      </div>
      <div class="form-group">
        <label class="label">Price :</label>
        <input
          type="number"
          id="price"
          formControlName="price"
          placeholder="Price"
          class="input"
        />
        <p
          class="help is-danger walkP"
          *ngIf="
            (form.controls['price'].dirty || form.controls['name'].touched) &&
            form.controls['price'].errors &&
            form.controls['price'].errors['required']
          "
        >
          Image is required!
        </p>
      </div>
      <div class="field is-grouped">
        <div class="control">
          <button
            type="submit"
            class="button is-success"
            (click)="onSubmit()"
            [disabled]="!form.valid"
          >
            Save
          </button>
        </div>
        <div class="control">
          <button class="button is-warning">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</section>

Note that I am not using the classic tag form to encapsulate all my html elements, it is not necesary , because I am using a div with a [formGroup]="form" , additionally I am associating each input with its right formControl defined in the TypeScript.

I hope that this post help you in your learning of Angular.

Live Demo

Download Code

Components - Gallery of Fruits

Ricardo Torres — Tue, 28 Jun 2022 19:30:24 +0000

@Input to send messages from Parent to Child

@Output to send messages from Child to Parent

Understand the concept of Communication between components is basic to develop any Application in angular.

We must render a list of fruits by using 2 components:

1- product-list

<div class="container" id="navbar-container">
  <section class="section">
    <div class="container">
      <div class="has-text-centered" id="services-text-container">
        <h1 class="title is-1">Gallery of Fruits</h1>
      </div>
      <br />
      <div class="columns">
        <app-product-card
          *ngFor="let item of record"
          [product]="item"
        ></app-product-card>
      </div>
    </div>
  </section>
</div>

In the component product-list, we must call the service productService to get the data.

import { Component, OnInit } from '@angular/core';
import { Record } from 'src/app/model/record';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
})
export class ProductListComponent implements OnInit {
  record: Record[] = [];
  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts(): void {
    this.productService.getProducts().subscribe((data) => {
      this.record = data.record;
    });
  }
}

2-product-card

<div class="column">
  <div class="card">
    <div class="card-content">
      <div class="has-text-centered">
        <img [src]="product.image" />
      </div>
      <h3 class="title is-3 has-text-centered" id="card-product-description">
        {{ product.name }}
      </h3>
      <p class="has-text-centered">
        {{ product.description }}
      </p>
    </div>
  </div>
</div>

In the Typescript we must to define an @Input property named product, it is going to receive the data from the parent component (product-list).

import { Component, Input, OnInit } from '@angular/core';
import { Record } from 'src/app/model/record';

@Component({
  selector: 'app-product-card',
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.scss'],
})
export class ProductCardComponent implements OnInit {
  @Input() product!: Record;
  constructor() {}

  ngOnInit(): void {}
}

Live Demo

Download Code

Angular - Rxjs - Operator mergeAll

Ricardo Torres — Tue, 28 Jun 2022 18:51:09 +0000

MergeAll is represented by 2 Observables, the first one is named a higher-order Observable and the second one is an Observable that will depend upon each item of the higher-order Observable.

MergeAll is useful when you have a scenario to perform operations or searches by each item that is coming from the first Observable, so you are going to have one observable for each item.

Let me illustrate this with an example to make it clear.

Example:

We have 2 Observables:

1- I only have fruits names inside the the order higher Observable:

const fruits$ = new Observable((observer) => {
      observer.next('Cereza');
      observer.next('Mandarina');
      observer.next('Pera');
      observer.complete();
    });

2-The second Observable contains all the fruits with name, description, price and its image, it is located in a service name productService:

getProductsByName(name: string): Observable<any> {
    let headers = new HttpHeaders();
    headers = headers.set(
      'X-Master-Key',
      '$2b$10$ghNHmZWM5nvdrV5tDL6akuKN6JanJ9/iG9vAa4F1yJF8X/ccv3o9C'
    );
    const url = 'https://api.jsonbin.io/v3/b/62b9ef87192a674d291cb521';
    const data = this.httpClient.get<RootObject>(url, { headers: headers });
    return data.pipe(
      map((x) => {
        return x.record;
      }),
      map((y) => {
        let filtered = y.filter((c) => c.name === name);
        return filtered.length > 0 ? filtered[0] : null;
      })
    );
  }

The challenge consist in reading the order higher observable and call the method getProductsbyName and searchs all the details for every product in the list of the Observable and show it in a gallery.

Final Result:

Structure of the Observable with MergeAll.

Final Code:

import { Component, OnInit } from '@angular/core';
import { map, mergeAll, Observable, of } from 'rxjs';
import { Record } from 'src/app/model/record';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.scss'],
})
export class ProductListComponent implements OnInit {
  record: Record[] = [];
  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  addItem(name: string) {}

  getProducts(): void {
    const fruits$ = new Observable((observer) => {
      observer.next('Cereza');
      observer.next('Mandarina');
      observer.next('Pera');
      observer.complete();
    });

    fruits$
      .pipe(
        map((x) => {
          return this.productService.getProductsByName(`${x}`);
        }),
        mergeAll()
      )
      .subscribe((x) => {
        this.record.push(x);
      });
  }
}

Live Demo

Download Code

Angular - Rxjs - Operator map

Ricardo Torres — Mon, 27 Jun 2022 18:26:56 +0000

Transforms each item from an source by using a projection function and emit a result as an observable.

Let me show you an example:

I created an Api in jsonbin.io and it is returning this json:

{
    "record": [
        {
            "name": "Pineapple",
            "description": "There are many variations of passages of Lorem.",
            "price": 650,
            "image": "https://images.unsplash.com/photo-1587883012610-e3df17d41270?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
        },
        {
            "name": "Orange",
            "description": "There are many variations of passages of Lorem.",
            "price": 350,
            "image": "https://images.unsplash.com/photo-1577234286642-fc512a5f8f11?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80"
        },
        {
            "name": "Grapes",
            "description": "There are many variations of passages of Lorem.",
            "price": 120,
            "image": "https://images.unsplash.com/photo-1577069861033-55d04cec4ef5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
        },
        {
            "name": "Morron",
            "description": "There are many variations of passages of Lorem.",
            "price": 75,
            "image": "https://images.unsplash.com/photo-1525607551316-4a8e16d1f9ba?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=710&q=80"
        },
    ],
    "metadata": {
        "id": "62b9ef87192a674d291cb521",
        "private": true,
        "createdAt": "2022-06-27T17:57:27.165Z"
    }
}

Firts, I show all the products at the left side and when the user clicks over an specific product, it will map the product selected at the right side.

import { Component, OnInit } from '@angular/core';
import { map } from 'rxjs';
import { Record } from 'src/app/model/record';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-operator-map',
  templateUrl: './operator-map.component.html',
  styleUrls: ['./operator-map.component.scss'],
})
export class OperatorMapComponent implements OnInit {
  records: Record[] = [];
  record!: Record;
  constructor(private productService: ProductService) {}

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts(): void {
    this.productService.getProducts().subscribe((data) => {
      this.records = data.record;
    });
  }

  mapRecord(value: number) {
    this.productService
      .getProducts()
      .pipe(map((x) => x.record))
      .subscribe((data) => {
        this.record = data[value];
      });
  }
}

Live Demo
Download Code