Home Angular Angular 7 CRUD Angular 7 CRUD — Part 7 — Update an Existing Product

Angular 7 CRUD — Part 7 — Update an Existing Product

In this article, we will update an existing product details. Here we are using reactive forms and HttpClient for updating the product details.

Component class file like this

import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute} from "@angular/router";
import {CrudService} from "../../services/crud.service";
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

@Component({
selector: 'app-update',
templateUrl: './update.component.html',
styleUrls: ['./update.component.scss']
})
export class UpdateComponent implements OnInit {
productForm: FormGroup;
productID: any;
productData: any;
constructor(
private fb: FormBuilder,
private crudService: CrudService,
private router: Router,
private actRoute: ActivatedRoute) {
this.productForm = this.fb.group({
name: ['', Validators.required],
desc: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(1000)])],
price: ['', Validators.compose([Validators.required])],
});
//code
}

ngOnInit() {
this.productID = this.actRoute.snapshot.params['id'];
this.loadProductDetails(this.productID);
}

loadProductDetails(productID){
this.crudService.getProductDetails(productID).subscribe(product => {
this.productData = product;
this.productForm.controls['name'].setValue(this.productData['p_name']);
this.productForm.controls['desc'].setValue(this.productData['p_description']);
this.productForm.controls['price'].setValue(this.productData['p_price']);
});
}

updateProductData(values){
const productData = new FormData();
productData.append('id', this.productID);
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);
this.crudService.updateProduct(productData).subscribe(result=>{
this.router.navigate(['']);
})
}
}

First Inject the following services into the constructor using DI.

constructor(
private fb: FormBuilder,
private crudService: CrudService,
private router: Router,
private actRoute: ActivatedRoute)

Get the product id from the route using the following code

this.productID = this.actRoute.snapshot.params['id'];

Create a method for loading product details and the method into the ngOnInit

method.

loadProductDetails(productID){
this.crudService.getProductDetails(productID).subscribe(product => {
this.productData = product;
this.productForm.controls['name'].setValue(this.productData['p_name']);
this.productForm.controls['desc'].setValue(this.productData['p_description']);
this.productForm.controls['price'].setValue(this.productData['p_price']);
});
}

Once the product value comes from the web API, we need to set that values to the form controls

this.productForm.controls['name'].setValue(this.productData['p_name']);
this.productForm.controls['desc'].setValue(this.productData['p_description']);
this.productForm.controls['price'].setValue(this.productData['p_price']);

Create a another one method for update the product details

updateProductData(values){
const productData = new FormData();
productData.append('id', this.productID);
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);
this.crudService.updateProduct(productData).subscribe(result=>{
this.router.navigate(['']);
})
}

Here i am using form data to combine the value in post format

const productData = new FormData();
productData.append('id', this.productID);
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);

Then call the update service to update the product

this.crudService.updateProduct(productData).subscribe();

Your template file like this

<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 sol-sm-12">
<form [formGroup]="productForm" (ngSubmit)="updateProductData(productForm.value)">

<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter Name" formControlName="name" required>
<div class="alert-danger" *ngIf="!productForm.controls['name'].valid && (productForm.controls['name'].touched)">
<div [hidden]="!productForm.controls['name'].errors.required">
Name is required.
</div>
</div>
</div>

<div class="form-group">
<label>Desc</label>
<input type="text" class="form-control" placeholder="Description" formControlName="desc" required>
<div class="alert-danger" *ngIf="!productForm.controls['desc'].valid && (productForm.controls['desc'].touched)">
<div [hidden]="!productForm.controls['desc'].errors.required">
Description is required.
</div>
<div [hidden]="!productForm.controls['desc'].errors.minlength">
Description must be have 10 character length.
</div>
</div>
</div>

<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" placeholder="price" formControlName="price" required>
<div class="alert-danger" *ngIf="!productForm.controls['price'].valid && (productForm.controls['price'].touched)">
<div [hidden]="!productForm.controls['price'].errors.required">
Price is required.
</div>
</div>
</div>

<button type="submit" class="btn btn-primary" [disabled]="!productForm.valid">Submit</button>

</form>
</div>
</div>
</div>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

The Binary Search Algorithm in JavaScript

In this post, I'll compare linear search and binary search algorithms. You'll see pseudocode for each algorithm, along with examples and a...

JavaScript Callbacks, Promises, and Async Functions|Part 2

Introduction In part one of this tutorial, we learned the principles behind asynchronous programming and using callbacks. To review,...

JavaScript Callbacks, Promises, and Async Functions| Part 1

Introduction There is a lot of talk about asynchronous programming, but what exactly is the big deal? The big...

JavaScript Best Practices for Beginners

1. Use === Instead of == JavaScript utilizes two different kinds of equality operators: === | !== and == | != It is considered best practice to...

Recent Comments

Sathish Kumar Ramalingam on Angular 2 Admin LTE Theme Integration