Как отфильтровать несколько полей формы и отобразить в таблице в угловых 5?

Question

У меня есть форма, в которой есть флажки и выпадающие списки, а данные, присутствующие в раскрывающихся списках, извлекаются из json. Я должен выбрать опцию выпадающих меню, текст, написанный в текстовом поле, при нажатии кнопки «Отправить» мне нужно отфильтровать и показать отфильтрованные данные в таблице.

<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>

Я создал форму в своем компоненте. Я создал все данные формы, которые заполняются при отправке моей формы на основе моего выбора раскрывающихся списков и флажка. И я должен отфильтровать эти данные и отобразить в таблице на форму отправки

@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

Наконец, я пришел к одному решению, которое работает для нескольких фильтров, и при отправке данные должны быть отфильтрованы в таблице. Но это требует оптимизации, если у вас много условий.

  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]);
      }
    }

Массив отфильтрованных заданий имеет отфильтрованный список.

   <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>