在Angular中，在回傳obsable之前添加驗證資訊

每次點擊按鈕，如果Modelform無效，則回傳通知資訊，而不是繼續創建用戶（createUser）。

只有在沒有表單驗證錯誤的情況下，它才應該繼續回傳 this.accountService.create

該函式是否干凈、正確地實作了？ 是否有一些重大問題導致了該問題？謝謝。

我應該把checkInputs的驗證放在哪里，如果有驗證錯誤，就不應該繼續進行this.accountService.create

#html代碼

 <button #createUserBtn mat-flat-button color="primary"/span> >Create
                    User</button>

#code

@ViewChild('createUserBtn'/span>, { static: true, read: ElementRef })
  button: ElementRef;


  ngAfterViewInit()。void {
    fromEvent(this.button.nativeElement，'click')
      .pipe(
        tap(x => x)。
        exhaustMap(ev =>  {
          return this.createUser（）。
        })
      )
      .pipe(tap(x =>  x))
      .subscribe(this.handleResponse() ）。)
  }

  createUser（）。Observable< any> {
    this.checkInputs（）。
    this.isInProgress = true;
    this.modelForm.markAllAsTouched（）。
    return this.accountService。 create(this.modelForm.value)。pipe(
        finalize(() =>(this.isInProgress =false)
    );
  }

  handleResponse（）: any {
    return {
      next: res =>  {
        this.notificationService.showSuccess('用戶已成功創建。')。
        this._router.navigate（['settings/user']）。
      },
      error: err =>  {
        this.notificationService.showError('Something went wrong, Try again later. ')。
        this.isInProgress = false;
      },
      complete: () => this.isInProgress = false.
    };
  }

  checkInputs（） {
    if(this.userStatus == 'USER_on_NO_ACCOUNT') {

      if(!this.modelForm。 get('firstName').value) {
        this.notificationService.showError('First Name is required. ')。
        return;
      }

      if(!this.modelForm。 get('lastName').value) {
        this.notificationService.showError('Last Name is required. ')。
        return;
      }

      if(!this.modelForm。 get('companyName').value) {
        this.notificationService.showError('Company Name is required. ' )。
        return;
      }
    }
    
    if(!this.modelForm。 get('roleId').value) {
      this.notificationService.showError('Security Role is required. ' )。
      return;
    }

    if（this.modelForm.get（'roleId'）。 value && this.modelForm。 get('roleId').value !==7&& ! this.modelForm.get（'isSso'）.value) {
      this.notificationService.showError('SSO is required. ' )。
      return。
    }

    if(this.modelForm. get('roleId').value && this。 modelForm.get('isSso').value && this. modelForm.get('isSso').value =='Yes' & & ! this.modelForm.get('ssocredentials').value) {
      this.notificationService.showError('SSO Credential is required. ' )。
      return。
    }

    if(this.modelForm. get('isSso').value =='No') {
      this.modelForm。 get('ssocredentials').setValue(null) 。
    }
  

uj5u.com熱心網友回復：

你可以在this.accountService.create(this.modelForm.value)之前添加invalid檢查，但你必須改變click事件處理程式，使其像下面這樣：

• 沒有必要以這種方式處理click事件，相反，你可以直接從模板中添加事件處理程式：

< button mat-flat-button color="primary"（click）="createUser()"> 
  創建用戶
</button>創建用戶。

• 沒有必要將createUser與其他的觀察變數進行連鎖，對于handleResponse也是如此。相反，你可以在createUser方法中訂閱accountService.create函式，并在其中處理success和fail，就像這樣：

createUser()。void {
  this.checkInputs（）。
  this.isInProgress = true;
  this.modelForm.markAllAsTouched（）。

  //在這里你可以檢查表單是否有效：。
  if (this.modelForm.invalid) return;

  this.accountService。 create(this.modelForm.value)
    .pipe(
      // take(1)是用來在結果到來后完成觀測的。。
      take（1）。
      catchError((err) =>  {
        this.notificationService.showError(
          'Something went wrong, Try again later.
        );
        this.isInProgress = false;
        return EMPTY;
      }),
      finalize(() => (this.isInProgress =false)
    )
    .subscribe((res) =>/span> {
      this.notificationService.showSuccess(
        '用戶已成功創建。'。
      );
      this._router.navigate（['settings/user']）。
    });
}

• 你可以洗掉ngAfterViewInit塊、handleResponse方法和button@ViewChild，因為上面的createUser將處理這些，并且在收到服務的結果后直接完成可觀察。

標籤：

上一篇：ASP.NETCore5.0與特定來源的CORS策略的問題

下一篇：在Python3中向Tkinter回呼驗證函式傳遞args，這可能嗎？