feat: add validation in the forms of the product page

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

@@ -13,7 +13,6 @@
   </div>
   <div class="card-body">
     <ngx-datatable [rows]="items" [count]="count" [list]="list" default>
-      <!-- TODO: localize column headers -->
       <ngx-datatable-column
         [name]="'AbpUi::Actions' | abpLocalization"
         [sortable]="false"
@@ -83,53 +82,54 @@
     <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
       <div class="mb-3">
         <label class="form-label" for="code">
-          {{ 'CatalogService::DisplayName:Code' | abpLocalization }}
+          {{ 'CatalogService::DisplayName:Code' | abpLocalization }} *
         </label>
         <input
           type="text"
           class="form-control"
           id="code"
           formControlName="code"
-          placeholder="{{ 'CatalogService::DisplayName:Code' | abpLocalization }}"
+          [readonly]="selected?.id"
+          [placeholder]="'CatalogService::DisplayName:Code' | abpLocalization"
         />
       </div>
 
       <div class="mb-3">
         <label class="form-label" for="name">
-          {{ 'CatalogService::DisplayName:Name' | abpLocalization }}
+          {{ 'CatalogService::DisplayName:Name' | abpLocalization }} *
         </label>
         <input
           type="text"
           class="form-control"
           id="name"
           formControlName="name"
-          placeholder="{{ 'CatalogService::DisplayName:Name' | abpLocalization }}"
+          [placeholder]="'CatalogService::DisplayName:Name' | abpLocalization"
         />
       </div>
 
       <div class="mb-3">
         <label class="form-label" for="price">
-          {{ 'CatalogService::DisplayName:Price' | abpLocalization }}
+          {{ 'CatalogService::DisplayName:Price' | abpLocalization }} *
         </label>
         <input
           type="number"
           class="form-control"
           id="price"
           formControlName="price"
-          placeholder="{{ 'CatalogService::DisplayName:Price' | abpLocalization }}"
+          [placeholder]="'CatalogService::DisplayName:Price' | abpLocalization"
         />
       </div>
 
       <div class="mb-3">
         <label class="form-label" for="stockCount">
-          {{ 'CatalogService::DisplayName:StockCount' | abpLocalization }}
+          {{ 'CatalogService::DisplayName:StockCount' | abpLocalization }} *
         </label>
         <input
           type="number"
           class="form-control"
           id="stockCount"
           formControlName="stockCount"
-          placeholder="{{ 'CatalogService::DisplayName:StockCount' | abpLocalization }}"
+          [placeholder]="'CatalogService::DisplayName:StockCount' | abpLocalization"
         />
       </div>
     </form>

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

@@ -1,7 +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 { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { eCatalogPolicyNames } from '@catalog/config';
 import { ProductDto, ProductService } from '@catalog/proxy/products';
 import { finalize } from 'rxjs/operators';
@@ -49,10 +49,10 @@ 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],
+      name: [this.selected.name, { validators: [Validators.required] }],
+      code: [this.selected.code, { validators: [Validators.required] }],
+      price: [this.selected.price, { validators: [Validators.required] }],
+      stockCount: [this.selected.stockCount, { validators: [Validators.required] }],
     });
   }
 

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

@@ -3,11 +3,19 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { ProductRoutingModule } from './product-routing.module';
 import { ProductComponent } from './product.component';
 
 @NgModule({
   declarations: [ProductComponent],
-  imports: [CommonModule, ProductRoutingModule, ThemeSharedModule, CoreModule, NgbDropdownModule],
+  imports: [
+    CommonModule,
+    ProductRoutingModule,
+    ThemeSharedModule,
+    CoreModule,
+    NgbDropdownModule,
+    NgxValidateCoreModule,
+  ],
 })
 export class ProductModule {}