サービス変数の状態がコンポーネント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

技術的には、validateEmail呼び出しを購読してそこでコードを実行すると機能するはずです。しかし、私はあなたの質問を忘れてしまったかもしれません。

あなたはまた、単にisInValidatingを削除するなどの内側をonSubmit（値）を持つことができます：

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