I have a filter function that currently only returns the name values in my table. I would like to add options for both ascending and descending sorting to this filter.
Progress So Far:
- I am able to retrieve values from all inputs, including the
nameandasc/descrequests - I can return results based on the
nameinput
What I Need:
- Add the ability to sort results using the
asc / descrequest
Code:
HTML:
<form [formGroup]="filterForm" (ngSubmit)="search(column.real_name)">
<div class="card search-box p-2">
<div class="mb-2">
<label for="">Search By {{ column.name }}</label> <br>
<input nz-input formControlName="formInput" placeholder="Type here..." />
</div>
<div class="mb-2">
<label for="sort">Sort Order</label> <br>
<nz-select ngModel="none" formControlName="formSort" class="text-left mr-2" style="width:100%;">
<nz-option nzValue="none" nzLabel="None"></nz-option>
<nz-option nzValue="asc" nzLabel="Ascending"></nz-option>
<nz-option nzValue="desc" nzLabel="Descending"></nz-option>
</nz-select>
</div>
<div class="mb-2">
<label for="op">Filter Column</label> <br>
<nz-select ngModel="contains" formControlName="formColumn" class="text-left mr-2" style="width:100%;">
<nz-option nzValue="contains" nzLabel="Contains"></nz-option>
<nz-option nzValue="like" nzLabel="Like"></nz-option>
</nz-select>
</div>
<button type="submit" class="btn btn-warning w-100 mt-2"><i class="fe fe-search"></i> Search</button>
</div>
</form>
Script: (commented)
import { FormBuilder, FormGroup } from '@angular/forms';
filterForm: FormGroup
constructor(
public formBuilder: FormBuilder,
) {
this.filterForm = this.formBuilder.group({
formInput: [null, Validators.required],
formSort: [null, Validators.required],
formColumn: [null, Validators.required],
})
}
search(column): void {
const filterFormData = this.filterForm.value;
// values
console.log('formInput: ', filterFormData.formInput); // Already implemented (name input)
console.log('formSort: ', filterFormData.formSort); // Now I want to implement this value
console.log('formColumn: ', filterFormData.formColumn);
console.log('formColumnName: ', column);
this.visible = false;
// return results in table (currently only name input is presented)
this.listOfData = this.listOfData.filter((item: DataItem) =>
item[column].toLowerCase().indexOf(filterFormData.formInput.toLowerCase()) !== -1
);
}