changeDetectorRefしているのに画面項目に反映されていない。

前提

Angularで登録のシステムを作っています。
取得したデータの入力チェックが想定通りに動かず困っています。

実現したいこと

・情報取得ボタンを押した際にAPIにてデータを取得し、画面項目にバインドしてある変数へ設定する。
・続けて、設定されたデータの桁数・必須のチェックをさせる。
（チェックは入力部品のblurやinputイベントに設定されているため、イベントのキックだけを行っています。）

発生している問題・エラーメッセージ

バインド変数へ設定したあと再描画しているのに、入力チェックメソッド内で空として認識されてしまい、必須のエラーが出てしまう。入力チェックの際にはちゃんと入っていて欲しい。

該当のソースコード

touroku.component.ts

//=== 情報取得ボタンクリック時 === btnClick() { if(!this.code) { // ここでエラーメッセージを表示 return } // 確認ダイアログ if(this.jyusyo || this.simei){ //住所と氏名のいずれかに値が入っていたら、確認ダイアログを出す const dialogSubject = this.messageDialogService.confirmDialog(確認","上書きしてもよろしいですか？") //OKとキャンセルが選択可能なダイアログ。 Subject<string>が返る this.dialogSubscription = dialogSubject.asObservable().subscribe((result) => { if (result === "ok") { // 情報の取得・設定 this.getInfo() } }) }else{ // 情報の取得・設定 this.getInfo() } } //== 情報の取得・設定 == getInfo() { this.infoService.query({Code: this.code }).subscribe((data: any) => { // キーなしの場合はエラーとする if(data.targetInfo.key == null){ // ここでエラーメッセージを表示 return } // 画面にバインドしてある変数へ取得した値をセット this.mainKey = data.targetInfo.key this.jusyo = data.targetInfo.jusyo this.simei = data.targetInfo.name // 画面のプルダウンに存在しなかったら選択肢を追加 if(!this.list.some(item => item.code == data.targetInfo.kuniCode)){ this.list.push({code: data.targetInfo.kuniCode, name: data.targetInfo.kuniName }) } this.kuniCode = data.targetInfo.kuniCode this.kuniName = data.targetInfo.kuniName // 再描画 this.changeDetectorRef.detectChanges() // 入力チェック this.checkInput() },(err) => { // ここでエラー画面へ遷移 }) } //=== 入力チェック === checkInput(){ let eventInp = new Event('input'); // 氏名 if(this.simei != undefined && this.simei != ''){ (document.getElementsByName('simei')[0] as HTMLInputElement).dispatchEvent(eventInp); } }

試したこと

入力チェックメソッド内で空だったので、再描画が先に動いていないのかと思いpipeとtapを使って順番に実行させようと試みましたが、うまくいきませんでした。

this.infoService.query({Code: this.code }).pipe( tap(() => { // 画面にバインドしてある変数へ取得した値をセット }), tap(() => { // 再描画 }), tap(() => { // 入力チェック }) ).subscribe()

補足情報（FW/ツールのバージョンなど）

Anuglar 14.1.0
Node.js 16.17.0