Implemented that stock in AddEditBookForm only allows whole numbers

src/app/app.module.ts

@@ -60,6 +60,7 @@ import { ButtonGroupComponent } from './components/cart/button-group/button-grou
 import { NgxPermissionsModule } from 'ngx-permissions';
 import { FooterComponent } from './components/footer/footer.component';
 import { BookExcelParserComponent } from './components/book/book-excel-parser/book-excel-parser.component';
+import { WholeNumberDirective } from './shared/utils/directives/whole-number.directive';
 
 @NgModule({
   declarations: [
@@ -89,6 +90,7 @@ import { BookExcelParserComponent } from './components/book/book-excel-parser/bo
     ViewBookComponent,
     FooterComponent,
     BookExcelParserComponent,
+    WholeNumberDirective,
   ],
   imports: [
     AppRoutingModule,

src/app/components/book/add-edit-book-form/add-edit-book-form.component.html

@@ -125,6 +125,7 @@ <h1 class="text-center m-2 p-2" *ngIf="!isAddMode">Edit book</h1>
           <!-- STOCK -->
           <mat-label>Stock</mat-label>
           <input
+          appWholeNumber
           formControlName="stock"
           matInput
           placeholder="Enter the stock"

src/app/components/user/forms/user/add-edit-user-form.component.html

@@ -31,7 +31,7 @@
       <div class="col-sm">
         <mat-form-field class="form-group w-100" appearance="fill">
           <mat-label>Email</mat-label>
-          <input formControlName="email" matInput placeholder="Enter your email" required type="text">
+          <input formControlName="email" matInput placeholder="Enter your email" [readonly]="" required type="text" >
           <mat-error *ngIf="f['email'].invalid">{{getErrorMessage('email')}}</mat-error>
         </mat-form-field>
       </div>

src/app/components/user/forms/user/add-edit-user-form.component.ts

@@ -50,19 +50,5 @@ export class AddEditUserForm extends AbstractForm implements OnDestroy, OnInit {
     this.id = this.route.snapshot.params['id'];
 
     this.form = this.rootFormGroup.control.get(this.formGroupName) as FormGroup;
-
-    if(this.id){
-      this.loadUser();
-    }
-  }
-
-  // Private methods
-  /**
-   * Load user data using the user service based on the provided ID.
-   */
-  private loadUser(){
-    this.userService.getById(this.id!).subscribe((response) => {
-      this.form.patchValue(response);
-    })
   }
 }

src/app/shared/utils/directives/whole-number.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { AbstractControl, NG_VALIDATORS } from '@angular/forms';
+
+@Directive({
+  selector: '[appWholeNumber]',
+})
+export class WholeNumberDirective {
+  private regex: RegExp = new RegExp(/^[0-9]+$/);
+
+  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home', '-', 'ArrowLeft', 'ArrowRight', 'Del', 'Delete'];
+
+  constructor(private el: ElementRef) {}
+
+  @HostListener('keydown', ['$event'])
+  onKeyDown(event: KeyboardEvent) {
+    // Allow Backspace, tab, end, and home keys
+    if (this.specialKeys.indexOf(event.key) !== -1) {
+      return;
+    }
+
+    let current: string = this.el.nativeElement.value;
+
+    const position = this.el.nativeElement.selectionStart;
+
+    const next: string = [current.slice(0, position), event.key == 'Whole' ? '.' : event.key, current.slice(position)].join('');
+
+    if (next && !String(next).match(this.regex)) {
+      event.preventDefault();
+    }
+  }
+}