在 Angular 中从模板检查多个表单值的正确方法是什么？

Question

有一堆有效的搜索组合，我想禁用表单，除非输入了有效的搜索字段。目前我有一个方法 isValidSearchCombo() 我正在从模板调用，但我知道这不是最佳实践，因为更改检测不知道何时需要重新运行。

观察这些字段并切换 disableSearchButton 布尔值的最佳方式是什么？

<button
  id="submit_button"
  type="submit"
  mat-flat-button
  [disabled]="!this.isValidSearchCombo()"
>

isValidSearchCombo(): boolean {
  return Boolean(
    this.searchForm.value.firstName
    && this.searchForm.value.lastName
    && this.searchForm.value.state
    || (this.searchForm.value.foo && (this.searchForm.value.bar || this.searchForm.value.fooBar))
    || (this.searchForm.value.barFoo)
  );
}

Answer 1

因为

searchForm

似乎是一个 Angular 形式，一个变化检测友好的版本是：

isValidSearchCombo: boolean;

ngOnInit(): void {
  this.searchForm.valueChange.subscribe((value) => {
    this.isValidSearchCombo = Boolean(
      value.firstName
      && value.lastName
      && value.state
      || (value.foo && (value.bar || value.fooBar))
      || (value.barFoo)
    );
  });
}

<button
  id="submit_button"
  type="submit"
  mat-flat-button
  [disabled]="!isValidSearchCombo">