Skip to content

BaseEditComponent

reference
1 min readUpdated

Kind: Class

Source: Pams/Web/Pams.WebApp/Client/app/core/components/base-edit.component.ts (line 21)

Part of: Pams

BaseEditComponent is a shared base class for edit screens in the PAMS web application. It coordinates form construction, data population, validation, save actions, reset and cancel behavior, navigation, and unsaved-change checks.

Implements: OnInit, CanComponentDeactivate

Methods

MethodSignatureReturns
buildFormbuildForm()void
populateComponentDataAsyncpopulateComponentDataAsync()void
customValidatecustomValidate()void
ngOnInitngOnInit()void
onCancelonCancel()void
goBackgoBack()void
onResetonReset()void
canDeactivatecanDeactivate()`Observable
onSaveandCloseonSaveandClose()void
onSaveonSave()void
unloadNotificationunloadNotification($event: any)void
getItemgetItem()void
populateDataForNewItempopulateDataForNewItem()void
setItemIdsetItemId()void

Properties

PropertyType
idnumber
componentNamestring
itemT
isLoadingboolean
isSavingboolean
isSimpleLoadboolean
isSaveAttemptedboolean
isSelfContainedboolean
closeOnSaveboolean
momentFunctionany
isNewItemboolean
guidKeystring
errorMessagestring
errorMessageListstring[]
isNewEnabledboolean
isEditEnabledboolean
isDeleteEnabledboolean
FormSavedany
FormClosedany
FormDataLoadedany
ItemDataLoadedany

Diagram

mermaid
graph LR
    Init[ngOnInit] --> Build[buildForm]
    Init --> Populate[populateComponentDataAsync]
    Populate --> Edit[Edit form data]
    Edit --> Validate[customValidate]
    Validate --> Save[onSave]
    Save --> SaveClose[onSaveandClose]
    Edit --> Reset[onReset]
    Edit --> Cancel[onCancel]
    Cancel --> Back[goBack]
    Edit --> Guard[canDeactivate]

Usage

ts
import { Component, OnInit } from '@angular/core';
import { BaseEditComponent } from './base-edit.component';

@Component({
  selector: 'app-customer-edit',
  template: `
    <button type="button" (click)="onSave()">Save</button>
    <button type="button" (click)="onSaveandClose()">Save and close</button>
    <button type="button" (click)="onReset()">Reset</button>
    <button type="button" (click)="onCancel()">Cancel</button>
  `
})
export class CustomerEditComponent extends BaseEditComponent implements OnInit {
  override buildForm(): void {
    // Create the customer edit form.
  }

  override async populateComponentDataAsync(): Promise<void> {
    // Load the customer record and assign form values.
  }

  override customValidate(): boolean {
    // Add screen-specific validation before saving.
    return true;
  }
}

AI Coding Instructions

  • Extend BaseEditComponent for edit pages that need the shared form, save, reset, cancel, and navigation flow.
  • Override buildForm() before reading or assigning form values in populateComponentDataAsync().
  • Put page-specific validation in customValidate() so onSave() and onSaveandClose() follow the same validation path.
  • Keep canDeactivate() aligned with form changes so navigation guards can detect unsaved edits.

Was this page helpful?

Download as PDF