title: How to solve blur and submit event simultaneous in angular
body: <p>I have text box in my page, which i can enter 9 digit number. <strong>Onblur</strong> I am validating like the entered number is valid or not using <strong>API</strong> call, If service returns failure it will clear the text box with red border and form will be invalid. The event conflict happening between <strong>OnBlur</strong> and <strong>Submit</strong>. <strong>Submit</strong> service will call only the form is valid otherwise it will show toaster like enter mandatory filed.</p>
  
  <p>If the text field focused and directly if I click on submit button, both event calling simultaneously and it is clearing the number field <strong>OnBlur</strong> as well as the service is calling.</p>
  
  <p>Please can you help me to resolve this conflicts.</p>
  
  <p><strong>file.html</strong></p>
  
  <pre><code>&lt;form class="contact-form" #create="ngForm"&gt;
      &lt;div class="controls"&gt;
        &lt;input NumberOnly="true" type="text" id="num" [ngClass]="{'red-border-class': ((showErrorFlag == true &amp;&amp; numberField.errors) || (showErrorFlag == true &amp;&amp; numberField.errors &amp;&amp; (numberField.dirty || numberField.touched)))}"
    [disabled]="disableRotaDetailFields" [(ngModel)]="number"
     class="floatLabel" name="ownership" required #numberField="ngModel" (blur)="validatenumber(number)" [maxLength]="einLength"&gt;
  &lt;label for="ein"&gt;number&lt;sup&gt;*&lt;/sup&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;button (click)="SaveData(create)"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>file.ts</strong></p>
  
  <pre><code>public validatenumber(number) {
          let reqObj = {
            "ownership": number
          }
  
          this.calloutService.validateOwnerEin(reqObj)
            .pipe(takeUntil(this.unsubscribe))
            .subscribe((data) =&gt; {
            }, (err) =&gt; {
              if (err.status == 404) {
                this.number = "";
              }
              this.toastr.error(err.overriddenMessage);
            })
  
        }
  
      SaveData(){
      if (!formFlag.valid ) {
          this.showErrorFlag = true;
          this.toastr.error('Please fill all the mandatory fields');
      }else {
        this.calloutService.createData(this.data)
            .pipe(takeUntil(this.unsubscribe))
            .subscribe(data =&gt; {
              this.showSpinnerFlag = false;
              let response = data;
              if (data) {
                this.toastr.success("Rota created successfully.");
              } else {
                this.toastr.error("Could not save.");
              }
            }, err =&gt; {
              this.showSpinnerFlag = false;
              this.toastr.error(err.overriddenMessage);
            })
      }
  }
  </code></pre>