Angular 7 CRUD - Часть 7 - Обновление существующего продукта

В этой статье мы обновим информацию о существующем продукте. Здесь мы используем реактивные формы и HttpClient для обновления сведений о продукте.

Файл класса компонентов, подобный этому

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(['']);
})
}
}

Сначала введите следующие службы в конструктор с помощью DI.

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

Получите идентификатор продукта из маршрута, используя следующий код

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

Создайте метод для загрузки сведений о продукте и метод в ngOnInit

метод.

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']);
});
}

Как только значение продукта поступает из веб-API, нам нужно установить эти значения в элементы управления формы.

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(['']);
})
}

Здесь я использую данные формы, чтобы объединить значение в формате сообщения

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();

Ваш файл шаблона похож на этот

<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>

Предыдущая часть | Следующая часть