Trang chủ » Blog » CRUD trong Angular với 2 bảng (Phần 1)

CRUD trong Angular với 2 bảng (Phần 1)

bởi CodeGym | 06/12/2023 17:30 | Blog
  • Bài viết này mình sẽ hướng dẫn mọi người cách CRUD trong Angular với 2 bảng trở lên
  • Đầu tiên khởi tạo dự án Angular
  • Tạo interface Product như sau:

CRUD trong Angular

  • Category:

CRUD trong Angular

  • Tạo file ProductService

CRUD trong Angular

  • Chúng ta tạo lần lượt các component CreateProduct, UpdateProduct, ListProduct, DeleteProduct
  • create-product.component.ts
import {Component, OnInit} from ‘@angular/core’;
import {FormControl, FormGroup} from ‘@angular/forms’;
import {Product} from ‘../../model/product’;
import {ProductService} from ‘../../service/product.service’;
import {Category} from ‘../../model/category’;
import {CategoryService} from ‘../../service/category.service’;

@Component({
  selector: ‘app-create-product’,
  templateUrl: ‘./create-product.component.html’,
  styleUrls: [‘./create-product.component.css’]
})
export class CreateProductComponent implements OnInit {
  productForm: FormGroup = new FormGroup({
    name: new FormControl(”),
    category: new FormControl(”)
  });
  categoryList: Category[] = [];

  constructor(private productService: ProductService,
              private categoryService: CategoryService) {
  }

  ngOnInit() {
    this.getCategories();
  }

  addProduct() {
    const product: Product = {
      name: this.productForm.value.name,
      category: {
        id: this.productForm.value.category
      }
    };
    this.productService.createProduct(product).subscribe(() => {
      alert(‘success’);
      this.productForm.reset();
    }, () => {
    });
  }

  getCategories() {
    this.categoryService.listCategory().subscribe((result) => {
      this.categoryList = result;
    });
  }
}
  • create-product.component.html
<div class=”text-center”>
  <h2>Tạo mới sản phẩm</h2>
</div>
<form [formGroup]=”productForm” (ngSubmit)=”addProduct()”>
  <label class=”col”>
    Tên sản phẩm:
    <input type=”text” formControlName=”name” class=”form-control”>
  </label>
  <label class=”col”>
    <label for=”category”>Danh mục:</label>
    <select class=”custom-select custom-select-sm” id=”category” formControlName=”category”>
      <option *ngFor=”let category of categoryList” [value]=”category.id”>{{category.name}}</option>
    </select>
  </label>
  <div class=”col”>
    <button class=”btn btn-info” type=”submit”>Tạo mới</button>
  </div>
</form>
  • Và đây là giao diện và kết quả sau khi tạo mới

  • Sau đó chúng ta vào trong db để kiểm tra

 

Author: Nguyễn Minh Quân

Đăng ký nhận bộ tài liệu kỹ năng dành cho lập trình viên (video hướng dẫn + slide) tại đây

Tìm hiểu thêm về mô hình Coding Bootcamp tại đây

Tags:

0 Lời bình

Gửi Lời bình

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

BÀI VIẾT LIÊN QUAN

BẠN MUỐN HỌC LẬP TRÌNH?

GỌI NGAY

098 953 44 58

Đăng ký tư vấn lộ trình học lập trình

Đăng ký tư vấn, định hướng lộ trình học và giải đáp các thắc mắc về ngành nghề – Miễn phí – Online.

2 + 15 =

TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM
TƯ VẤN VỀ LỘ TRÌNH HỌC NGHỀ LẬP TRÌNH TẠI CODEGYM