Javascript 如何在angular中同时解决模糊和提交事件

我的页面中有一个文本框，我可以输入9位数字Onblur我正在使用API调用验证输入的号码是否有效，如果服务返回失败，它将清除带有红色边框的文本框，表单将无效。OnBlur和Submit之间发生的事件冲突Submit服务将只调用有效的表单，否则它将显示toaster之类的输入必填字段

如果文本字段聚焦，并且如果我直接单击submit按钮，则两个事件同时调用，并且它正在清除数字字段OnBlur，同时服务正在调用

请你帮我解决这个冲突

file.html

<form class="contact-form" #create="ngForm">
    <div class="controls">
      <input NumberOnly="true" type="text" id="num" [ngClass]="{'red-border-class': ((showErrorFlag == true && numberField.errors) || (showErrorFlag == true && numberField.errors && (numberField.dirty || numberField.touched)))}"
  [disabled]="disableRotaDetailFields" [(ngModel)]="number"
   class="floatLabel" name="ownership" required #numberField="ngModel" (blur)="validatenumber(number)" [maxLength]="einLength">
<label for="ein">number<sup>*</sup></label>
</div>
<button (click)="SaveData(create)">Save</button>
</form>

---

因此，在提交时检查调用是否仍然处于活动状态，它会一直等到调用不处于活动状态。这并不能解决您的问题，但如果输入的值被视为无效，则清除输入是违反良好做法的。理想情况下，用户希望看到错误并自己修改。@melancia-当

validatenumber（）

服务返回false并向用户显示警报时，它将清除字段，但它的调用仍会创建服务。我建议不要清除输入。但正如我所说，这与你的问题无关，也无法解决报道的问题。

public validatenumber(number) {
        let reqObj = {
          "ownership": number
        }

        this.calloutService.validateOwnerEin(reqObj)
          .pipe(takeUntil(this.unsubscribe))
          .subscribe((data) => {
          }, (err) => {
            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 => {
            this.showSpinnerFlag = false;
            let response = data;
            if (data) {
              this.toastr.success("Rota created successfully.");
            } else {
              this.toastr.error("Could not save.");
            }
          }, err => {
            this.showSpinnerFlag = false;
            this.toastr.error(err.overriddenMessage);
          })
    }
}