How to filter multiple form fields and display in table in angular 5? - angular5

Question

I have a form which has checkbox and dropdowns and the data which is present in dropdowns is fetched from json. I have to select the dropdowns option , text written in text box on click of submit i have to filter and show the filtered data in table.
<form [formGroup]="reportsForm" (ngSubmit)=onSubmit(reportsForm.value)>
<label> Task Status</label>
<div>
<label class="checkbox-inline"></label>
<input type="checkbox" formControlName="whole" id="whole" value="whole"> a
<label class="checkbox-inline"></label>
<input type="checkbox" formControlName = "progress" id= "progress" value="progress"> b
</div>
<label>Date Time (GMT)</label>
<div class="">
<div class="col-md-6">
<label>FROM</label>
<input type="date" formControlName = "bfrom" id= "from" class="form-control">
</div>
<div class="col-md-6">
<label>TO</label>
<input type="date" formControlName = "to" id= "to" class="form-control">
</div>
</div>
<label>Group Name</label>
<div class="input-group-btn">
<select class="form-control" formControlName="groupname" id="groupname">
<option>Select</option>
<option *ngFor="let x of y" >{{x.grouping}}</option>
</select>
</div>
<label>Task Name</label>
<div class="input-group-btn">
<input type="text" formControlName="taskname" id="taskname" class="form-control">
</div>
<label>ASSIGNEE</label>
<div class="input-group-btn">
<select class="form-control" formControlName="assignee" id="assignee">
<option>Select</option>
<option *ngFor="let x of y" >{{x.assignee}}</option>
</select>
</div>
<label>Frequency</label>
<div class="input-group-btn">
<select class="form-control" formControlName="frequency" id= "frequency">
<option>Select</option>
<option *ngFor="let x of y">{{x.frequency}}</option>
</select>
</div>
<div class="buttons">
<button type="submit" class="btn">Submit</button>
</div>
</form>
<table class="table table table-bordered">
<thead>
<tr>
<th scope="col ">GroupName</th>
<th scope="col ">Assignee</th>
<th scope="col ">frequency</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of y">
<td scope="col">{{x.grouping}}</td>
<td scope="col">{{x.assignee}}</td>
<td scope="col">{{x.frequency}}</td>
</tr>
</tbody>
</table>
I have created a form in my component I have created all form data which is populating on submit of my form based on my selections of dropdowns and checkbox. And I have to filter those data and display on the table on form submit
#Component({
selector: 'app-rep',
templateUrl: './rep.component.html',
styleUrls: ['./rep.component.css']
})
export class RepComponent implements OnInit {
y;
users;
reportsForm: FormGroup;
constructor(private service: RepositoryService) { }
ngOnInit() {
this.reportsForm = new FormGroup({
whole: new FormControl(''),
progress: new FormControl(''),
bfrom: new FormControl(''),
to: new FormControl(''),
groupname: new FormControl(''),
taskname: new FormControl(''),
assignee: new FormControl(''),
frequency: new FormControl(''),
});
this.getTasks();
this.getUsers();
}
public getUsers() {
this.service.getData(usersUrl).subscribe(res =>{this.users = res.data.items});
}
public getTasks() {
this.service.getData(reportsUrl).subscribe(res =>{this.y= res.data.items});
}
onSubmit(filterValue:any) {
console.log(this.reportsForm);
}
}

Answer 1

Finally I came up with one solution which is working for multiple filters and on submit data should be filtered in a table. But it needs optimization if you have many conditions.
onSubmit() {
this.filteredtasks=[];
let grp = this.reportsForm.value.groupname;
let fre = this.reportsForm.value.frequency;
let as= this.reportsForm.value.assignee;
let tsknm = this.reportsForm.value.taskname;
for(let i=0; i< this.y.length; i++) {
if(
(grp == "" || grp == this.tasks[i].groupname) &&
(fre == "" || fre == this.tasks[i].frequency) &&
(as== "" || as== this.tasks[i].assignee) &&
(tsknm == "" || tsknm == this.tasks[i].taskname)
) {
this.filteredtasks.push(this.y[i]);
}
}
The filteredtasks array is having the filtered list..
<table class="table table table-bordered">
<thead>
<tr>
<th scope="col ">GroupName</th>
<th scope="col ">Assignee</th>
<th scope="col ">frequency</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let x of filteredtasks">
<td scope="col">{{x.groupname}}</td>
<td scope="col">{{x.assignee}}</td>
<td scope="col">{{x.frequency}}</td>
</tr>
</tbody>
</table>