javascript - 如何以角度解决模糊和同时提交事件

Question

我的页面中有文本框，我可以输入 9 位数字。Onblur我正在验证输入的数字是否有效，如果服务返回失败，它将清除带有红色边框的文本框并且表单将无效。OnBlur和Submit之间发生的事件冲突。提交服务将仅调用有效的表单，否则将显示烤面包机，如输入必填字段。

如果文本字段集中并直接单击提交按钮，则两个事件同时调用并且它正在清除数字字段OnBlur以及正在调用的服务。

请你能帮我解决这个冲突。

文件.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>

文件.ts

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);
          })
    }
}

标签： javascriptangular