0

I wanted to implement at least one field required to enable the submit button in angular form. I follow some example from stackoverflow and it's works at first when we unselect the option button remain enabled. Actual behaviour it should disabled if no value selected

import { isArrayLike } from 'lodash-es';

searchForm: FormGroup = this.fb.group({
  category: [null],
  funds: [null]
});

atLeastOneFieldRequiredValidator() {
    if (
        isArrayLike(this.searchForm.get('category').value) ||
        isArrayLike(this.searchForm.get('funds').value)
    ) {
        return false;
    } else {
        return true;
    }
}

ngOnInit() {
  this.atLeastOneFieldRequiredValidator();
}

<form [formGroup]="searchForm">
   <div>
      <div>
         <multi-select-checkbox [data]="categories | async" formControlName="category" [placeholder]="'Category'"></multi-select-checkbox>
      </div>
      <div>
         <multi-select-checkbox [data]="funds | async" formControlName="funds" [placeholder]="'Fund'"></multi-select-checkbox>
      </div>
   </div>
   <div>
      <button mat-flat-button type="submit" (click)="onApplyFilters()" [disabled]="atLeastOneFieldRequiredValidator()"> Apply Filter </button>
      <button mat-flat-button (click)="resetSearchForm()"> Clear </button>
   </div>
</form>

Johnny
  • 261
  • 7
  • 22

0 Answers0