title: Handling multiple users editing the same information angular 4
body: <p>hey how to handle multiple users editing same information? like by editing a patient using two browsers/users. Two browsers should start the edit process. One changes and saves, and the other browser changes to different values and attempt to save (but it should be rejected) 
  how can i achieve that?</p>
  
  <p><strong>my html file file</strong></p>
  
  <pre><code>&lt;ng-template #content&gt;
  &lt;form
  role="form"
  #createPatientForm="ngForm"
  (ngSubmit)="onLogin(createPatientForm.value)"
  novalidate&gt;
  &lt;div class="modal-body" *ngIf="!editMode || !confirm"&gt;
    &lt;div class="form-content"&gt;
      &lt;div class="form-group"&gt;
        &lt;div class="row"&gt;
          &lt;div id="fName" class="col-8"&gt;
            &lt;label for="firstName"&gt;First Name*&lt;/label&gt;
            &lt;input
              #fName="ngModel"
              type="text"
              [(ngModel)]="patient.FirstName"
              name="firstName"
              class="form-control input-underline input-lg"
              [ngClass]="{ invalid: !fName.valid &amp;&amp; fName.touched }"
              id="firstName"
              autocomplete="off"
              minlength="2"
              maxlength="20"
              required
            /&gt;
          &lt;/div&gt;
  
        &lt;div *ngIf="!fName.valid &amp;&amp; fName.touched" class="error"&gt;
          &lt;div *ngIf="fName.errors.required"&gt;First Name is required.  &lt;/div&gt;
          &lt;div *ngIf="fName.errors.minlength"&gt;Minimum of 2 characters.&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div *ngIf="!mName.valid &amp;&amp; mName.touched" class="error"&gt;
          &lt;div *ngIf="mName.errors.pattern"&gt;
            Numbers not allowed for initials.
          &lt;/div&gt;
          &lt;div *ngIf="mName.errors.minlength"&gt;Minimum of 2 characters.&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="lastName"&gt;Last Name*&lt;/label&gt;
        &lt;input
          #lName="ngModel"
          type="text"
          [(ngModel)]="patient.LastName"
          name="lastName"
          class="form-control input-underline input-lg"
          [ngClass]="{ invalid: !lName.valid &amp;&amp; lName.touched }"
          id="lastName"
          autocomplete="off"
          minlength="2"
          maxlength="50"
          inputName
          required
        /&gt;
  
        &lt;div *ngIf="!lName.valid &amp;&amp; lName.touched" class="error"&gt;
          &lt;div *ngIf="lName.errors.required"&gt;Last Name is required.&lt;/div&gt;
          &lt;div *ngIf="lName.errors.minlength"&gt;Minimum of 2 characters.&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
          &lt;div class="col-6"&gt;
            &lt;label for="Gender"&gt;Gender*&lt;/label&gt;
            &lt;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 &amp;&amp; gender.touched }"
              required
            &gt;
              &lt;option [ngValue]="null"&gt;Select&lt;/option&gt;
              &lt;option value="Male"&gt;Male&lt;/option&gt;
              &lt;option value="Female"&gt;Female&lt;/option&gt;
            &lt;/select&gt;
            &lt;div *ngIf="gender.value === null &amp;&amp; gender.touched"&gt;
              &lt;div class="error"&gt;Gender required.&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label for="patientEmail"&gt;Email&lt;/label&gt;
        &lt;input
          type="email"
          #email="ngModel"
          [(ngModel)]="patient.Email"
          name="patientEmail"
          class="form-control input-underline input-lg"
          [ngClass]="{ invalid: !email.valid &amp;&amp; email.touched }"
          id="patientEmail"
          minlength="5"
          maxlength="100"
          pattern="^(?!.*(?:''|\.\.))[\w-\.\']{1,}\@([\da-zA-Z-]{1,}\.){1,}[\da-zA-Z-]{2,3}$"
        /&gt;
        &lt;div class="error" *ngIf="!email.valid &amp;&amp; email.touched"&gt;
          &lt;div *ngIf="email.errors.pattern"&gt;
            Please enter a valid email address.
          &lt;/div&gt;
          &lt;div *ngIf="email.errors.minlength"&gt;
            minimum of 5 characters required.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="hint-section"&gt;
        &lt;p class="address-header text-center"&gt;
          * Required
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;span (click)="cancel()" class="clickable"&gt;CANCEL&lt;/span&gt;
    &lt;button
      [disabled]="
        checkFormValidity(createPatientForm) || !createPatientForm.form.valid
      "
      type="button"
      class="btn square-btn"
      (click)="editMode &amp;&amp; confirm ? setConfirm() : createUpdatePatient()"
    &gt;
      {{ editMode &amp;&amp; confirm ? "YES" : "NEXT" }}
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>here is my Ts file</strong></p>
  
  <pre><code> createUpdatePatient() {
  this.duplicateFinderService.confirmDuplicatePatient(
    this.dateOfBirth,
    this.patient,
    this.mode,
    this.patientId
  );
  this.router.navigate(["../additional-details"], {
    relativeTo: this.route
    });
  }
  </code></pre>
  
  <p><strong>additional detail ts file</strong></p>
  
  <pre><code>  update() {
  this.requestPending = true;
  this.patientService.updatePatientProfile(this.patient).subscribe(
    () =&gt; {
      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 =&gt; {
      this.requestPending = false;
       }
     );
   }
  </code></pre>
  
  <p><strong>billing detail</strong></p>
  
  <pre><code>  update() {
  this.requestPending = true;
  this.patientService.updatePatientBilling(this.patient).subscribe(() =&gt; {
    this.requestPending = false;
    this.store.dispatch(new SetPatientAction(this.patient, this.utilService));
    this.cancel();
    });
  }
  </code></pre>
  
  <p>can i achieve that in frontend? thanks</p>