Is it possible to handle multiple users editing the same information, such as editing a patient using two browsers or users simultaneously? One browser starts the edit process, makes changes and saves them. Meanwhile, another browser attempts to make different changes and save them, but they should be rejected. How can this functionality be achieved?

HTML File

<ng-template #content>
<form
role="form"
#createPatientForm="ngForm"
(ngSubmit)="onLogin(createPatientForm.value)"
novalidate>
<div class="modal-body" *ngIf="!editMode || !confirm">
  <div class="form-content">
    <div class="form-group">
      <div class="row">
        <div id="fName" class="col-8">
          <label for="firstName">First Name*</label>
          <input
            #fName="ngModel"
            type="text"
            [(ngModel)]="patient.FirstName"
            name="firstName"
            class="form-control input-underline input-lg"
            [ngClass]="{ invalid: !fName.valid && fName.touched }"
            id="firstName"
            autocomplete="off"
            minlength="2"
            maxlength="20"
            required
          />
        </div>

      <div *ngIf="!fName.valid && fName.touched" class="error">
        <div *ngIf="fName.errors.required">First Name is required.  </div>
        <div *ngIf="fName.errors.minlength">Minimum of 2 characters.</div>
      </div>

      <div *ngIf="!mName.valid && mName.touched" class="error">
        <div *ngIf="mName.errors.pattern">
          Numbers not allowed for initials.
        </div>
        <div *ngIf="mName.errors.minlength">Minimum of 2 characters.</div>
      </div>
    </div>
    <div class="form-group">
      <label for="lastName">Last Name*</label>
      <input
        #lName="ngModel"
        type="text"
        [(ngModel)]="patient.LastName"
        name="lastName"
        class="form-control input-underline input-lg"
        [ngClass]="{ invalid: !lName.valid && lName.touched }"
        id="lastName"
        autocomplete="off"
        minlength="2"
        maxlength="50"
        inputName
        required
      />

      <div *ngIf="!lName.valid && lName.touched" class="error">
        <div *ngIf="lName.errors.required">Last Name is required.</div>
        <div *ngIf="lName.errors.minlength">Minimum of 2 characters.</div>
      </div>
    </div>
        <div class="col-6">
          <label for="Gender">Gender*</label>
          <select
            #gender="ngModel"
            [(ngModel)]="patient.Gender"
            [class.text-dimmed]="!patient.Gender"
            name="gender"
            id="Gender"
            class="form-control input-underline input-lg"
            [ngClass]="{ invalid: gender.value === null && gender.touched }"
            required
          >
            <option [ngValue]="null">Select</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
          </select>
          <div *ngIf="gender.value === null && gender.touched">
            <div class="error">Gender required.</div>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group">
      <label for="patientEmail">Email</label>
      <input
        type="email"
        #email="ngModel"
        [(ngModel)]="patient.Email"
        name="patientEmail"
        class="form-control input-underline input-lg"
        [ngClass]="{ invalid: !email.valid && email.touched }"
        id="patientEmail"
        minlength="5"
        maxlength="100"
        pattern="^(?!.*(?:''|\.\.))[\w-\.\']{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,3}$"
      />
      <div class="error" *ngIf="!email.valid && email.touched">
        <div *ngIf="email.errors.pattern">
          Please enter a valid email address.
        </div>
        <div *ngIf="email.errors.minlength">
          minimum of 5 characters required.
        </div>
      </div>
    </div>
    <div class="hint-section">
      <p class="address-header text-center">
        * Required
      </p>
    </div>
  </div>
</div>
<div class="modal-footer">
  <span (click)="cancel()" class="clickable">CANCEL</span>
  <button
    [disabled]="
      checkFormValidity(createPatientForm) || !createPatientForm.form.valid
    "
    type="button"
    class="btn square-btn"
    (click)="editMode && confirm ? setConfirm() : createUpdatePatient()"
  >
    {{ editMode && confirm ? "YES" : "NEXT" }}
  </button>
</div>

TypeScript File

 createUpdatePatient() {
this.duplicateFinderService.confirmDuplicatePatient(
  this.dateOfBirth,
  this.patient,
  this.mode,
  this.patientId
);
this.router.navigate(["../additional-details"], {
  relativeTo: this.route
  });
}

Additional Detail TypeScript File

  update() {
this.requestPending = true;
this.patientService.updatePatientProfile(this.patient).subscribe(
  () => {
    this.store.dispatch(
      new SetPatientAction(this.patient, this.utilService)
    );
    this.requestPending = false;
    if (this.isAdminEdit) {
      this.router.navigate(["../billing"], { relativeTo: this.route });
    } else {
      this.router.navigate(["../"], { relativeTo: this.route });
    }
  },
  error => {
    this.requestPending = false;
     }
   );
 }

Billing Detail TypeScript File

  update() {
this.requestPending = true;
this.patientService.updatePatientBilling(this.patient).subscribe(() => {
  this.requestPending = false;
  this.store.dispatch(new SetPatientAction(this.patient, this.utilService));
  this.cancel();
  });
}

Is achieving this functionality in the frontend feasible? Thank you.