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>