僅當組件Angular4中的服務變量狀態更改時才運行函數

Question

我有一個稱為InfoFormService的服務，它有一個名為isInValidating的變量。

當組件按如下所示調用validateEmail（email）函數時，將變量設置為true。

@Injectable()
export class InfoFormService {

    private VALIDATE_EMAIL_URL: string = 'XXX';
    isInValidating: boolean = false;

    constructor(@Inject(APP_CONFIG) private config: AppConfig,
                private http:Http
    ) {

      console.log(this.config.apiEndpoint)

    }

    validateEmail(email) {
      console.log(email)
      this.isInValidating = true;
      return this.http.get(`${this.config.apiEndpoint}/${this.VALIDATE_EMAIL_URL}${email}`)
    }

}

每當電子郵件輸入文本更改時，該組件就會調用validateEmail。

因為ValidateEmail需要時間，所以當我單擊“提交”按鈕時，isInValidating值可能為true或false，但是一旦完成ValidateEmail操作，isInValidating值將設置為false，如上面的代碼所示。

我想要的是延遲單擊“提交”按鈕時發生的提交操作，直到服務的isInValidating值設置為true為止。

export class AbcBtnComponent implements OnInit {

    constructor(private formService:InfoFormService) {

    }

    ...

    emailField.valueChanges
      .filter(val => {
        return val.length >= 1;
      })
      .debounceTime(100)
      .switchMap(val => this.formService.validateEmail(val))
      .subscribe(res => {

        console.log(res)
        let validation = res.json();

        if (validation['valid']) {
          emailField.setErrors(null);
        } else {
          emailField.setErrors({ validEmail: true });
        }

        this.formService.isInValidating = false;

      });

    onSubmit(value) {
        // Here I want to delay until formService's isInValidating value = true

        submitAction(value)
    }

}

我想我必須使用Subject或Observable，但不知道如何使用它。

請幫我！

Answer 1

在組件中

get isInValidating(): boolean {
    return this.formService.isInValidating;
}

在模板中

<button type="submit" [disabled]="isInValidating">Submit</button>

Answer 2

this.formService.validateEmail(val))
      .subscribe(res => {

this.formService.validateEmail(val)
      .subscribe(res => {
..)

從技術上講，如果您訂閱validateEmail調用並在那里執行代碼，則它應該可以工作。 但我可能誤會了您的問題。

您也可以只刪除isInValidating並在其中包含onSubmit（value），例如：

this.formService.validateEmail(val)).subscribe(res => {
//logic to check your validation
if(valid) this.onSubmit(val)
});