feat: add form in product component

apps/angular/projects/catalog/src/pages/product/product.component.html

@@ -80,36 +80,63 @@
       ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
     ></ng-template>
 
-    <!-- <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
-      <ul ngbNav #nav="ngbNav" class="nav-tabs">
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-          </ng-template>
-        </li>
+    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
+      <div class="mb-3">
+        <label class="form-label" for="code">
+          {{ 'CatalogService::DisplayName:Code' | abpLocalization }}
+        </label>
+        <input
+          type="text"
+          class="form-control"
+          id="code"
+          formControlName="code"
+          placeholder="{{ 'CatalogService::DisplayName:Code' | abpLocalization }}"
+        />
+      </div>
 
-        <li ngbNavItem>
-          <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
-          <ng-template ngbNavContent>
-            <div
-              *ngFor="let roleGroup of roleGroups; let i = index; trackBy: trackByFn"
-              class="form-check mb-2"
-            >
-              <input
-                type="checkbox"
-                class="form-check-input"
-                [attr.id]="'roles-' + i"
-                [formControl]="roleGroup.controls[roles[i].name]"
-              />
-              <label class="form-check-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
-            </div>
-          </ng-template>
-        </li>
-      </ul>
+      <div class="mb-3">
+        <label class="form-label" for="name">
+          {{ 'CatalogService::DisplayName:Name' | abpLocalization }}
+        </label>
+        <input
+          type="text"
+          class="form-control"
+          id="name"
+          formControlName="name"
+          placeholder="{{ 'CatalogService::DisplayName:Name' | abpLocalization }}"
+        />
+      </div>
+
+      <div class="mb-3">
+        <label class="form-label" for="price">
+          {{ 'CatalogService::DisplayName:Price' | abpLocalization }}
+        </label>
+        <input
+          type="number"
+          class="form-control"
+          id="price"
+          formControlName="price"
+          placeholder="{{ 'CatalogService::DisplayName:Price' | abpLocalization }}"
+        />
+      </div>
 
-      <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
-    </form> -->
+      <div class="mb-3">
+        <label class="form-label" for="stockCount">
+          {{ 'CatalogService::DisplayName:StockCount' | abpLocalization }}
+        </label>
+        <input
+          type="number"
+          class="form-control"
+          id="stockCount"
+          formControlName="stockCount"
+          placeholder="{{ 'CatalogService::DisplayName:StockCount' | abpLocalization }}"
+        />
+      </div>
+    </form>
+
+    <ng-template #loaderRef
+      ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
+    ></ng-template>
   </ng-template>
 
   <ng-template #abpFooter>

apps/angular/projects/catalog/src/pages/product/product.component.ts

@@ -1,6 +1,7 @@
 import { ListService } from '@abp/ng.core';
 import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { eCatalogPolicyNames } from '@catalog/config';
 import { ProductDto, ProductService } from '@catalog/proxy/products';
 
@@ -25,10 +26,13 @@ export class ProductComponent implements OnInit {
   isModalVisible: boolean;
 
   modalBusy = false;
+
+  form: FormGroup;
   constructor(
     public readonly productService: ProductService,
     public readonly list: ListService,
-    private confirmationService: ConfirmationService
+    private confirmationService: ConfirmationService,
+    private fb: FormBuilder
   ) {
     // TODO: this is an example of paging
     this.list.maxResultCount = 2;
@@ -43,6 +47,15 @@ export class ProductComponent implements OnInit {
     });
   }
 
+  buildForm() {
+    this.form = this.fb.group({
+      name: [this.selected.name],
+      code: [this.selected.code],
+      price: [this.selected.price],
+      stockCount: [this.selected.stockCount],
+    });
+  }
+
   onEdit(product: ProductDto) {
     this.selected = product;
     this.openModal();
@@ -55,6 +68,7 @@ export class ProductComponent implements OnInit {
 
   openModal() {
     this.isModalVisible = true;
+    this.buildForm();
   }
 
   onDelete(product: ProductDto) {
@@ -68,4 +82,6 @@ export class ProductComponent implements OnInit {
         }
       });
   }
+
+  save() {}
 }