仅当组件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)
});