ajax - ユーザー入力で非同期呼び出しを行っているときにアイテムをフィルタリングする方法は?

Question

次のように、HTML に入力フィールドがあります。

<input (keyup)="userInput($event)" type="text">

コンポーネント内で、ユーザー入力を取得し、それが有効な入力であるかどうかをバックエンドで確認しています。この呼び出しを行う前に、変数に対して単純な空のチェックを行います。

userInput(e: any): void {
    this.userInputText = e.target.value;
    if (this.userInputText === '') { //Empty string check
        this.validInput = false;
    } else { // Check backend for availability
        this.userInput.next(this.userInputText);
    }
}

私のuserInput件名は

this.userInput
.debounceTime(1000)
.switchMap((val) => {
    return this.checkValidity(val); //service call
}).subscribe((res) => {
    this.validInput = res.status;
}, (err) => {
    ResponseHandler(err);
});

問題は、私が行う空のチェックです。

ユーザーが 'of' という 2 文字を入力し、それが有効であることを (呼び出して) 表示したとします。

ユーザーがバックスペースを押した場合 (入力は「o」になりました)、1 秒待って (テキスト「o」の呼び出しが発生します)、バックスペースを押して「o」を削除します (その結果、ユーザー入力が空になります)。フィールドが空です。

次に、ajax 呼び出し応答が返され (有効なテキスト「o」の場合)、有効と表示されます。したがって、空の文字列に対して有効であることを示すことになります。これを解決するにはどうすればよいですか? 何か案は？