Как отключить кнопку в форме Angular

Question

У меня есть кнопка, которую мне нужно отключить, когда форма пуста, поэтому, когда я открываю форму в начале, ее следует отключить и включить, когда какие-либо входы в форме получают значение, у меня есть этот код, но он не отключать при загрузке формы, так как при загрузке формы она действительна, как я могу сделать ее недействительной, чтобы кнопка была отключена?

HTML:

<button
  class="search-form__btn"
  type="submit"
  size="large"
  [disabled]="!isEnabled"
>
  Run Search
</button>

Файл TS:

public get isEnabled(): boolean {
  const form: FormGroup = this.searchForm;
  if (form.get('filters.firstName').value !== ''
    || form.get('filters.lastName').value !== ''
    || form.get('filters.company').value !== ''
    || form.get('filters.phone').value !== ''
    || form.get('filters.email').value !== ''
    || form.get('filters.officer').value !== ''
    || form.get('filters.number').value !== ''
    || form.get('filters.state').value !== '') {
    return form.valid;
  }
}

и это моя форма:

constructor(private fb: FormBuilder) {
  this.searchForm = this.fb.group({
    filters: this.fb.group({
      searchString: [""],
      firstName: [""],
      lastName: [""],
      company: [""],
      email: [null, [Validators.email]],
      phone: [""],
      officer: [""],
      number: [""],
      state: [""],
      exactMatch: [false],
    }),
    pageSize: [100],
    currentPage: [1],
  });
}

Answer 1

вы можете добавить Validators.required для полей и привязать отключенный атрибут, например:

<button 
  class="search-form__btn"
  type="submit"
  size="large"
  [disabled]="searchForm.invalid">Run Search</button>

Answer 2

[disabled]="searchForm.invalid"