Выделить поле формы при поиске - PullRequest
0 голосов
/ 09 июля 2020

В моем приложении angular я использую поле поиска для поиска в нескольких полях формы. Каждое поле формы имеет метку и поле ввода. Каждая метка определяется отдельно. Я хочу использовать поле поиска в своей форме для поиска по всей форме и выделения только соответствующей метки, когда она будет найдена. Я не использую его для l oop для определения меток. Каждая этикетка уникальна. Как я могу это реализовать. Пожалуйста, помогите мне.

  1. Как я могу использовать вертикальную черту для каждого поля формы по отдельности или используя для l oop.
  2. Как я могу сопоставить текст и выделить соответствующую метку с вводимым текстом для поиска.

HTML

<form
[formGroup]="form">
<h3>Group Filter</h3>
<div class="row">
    <div class="col-md-3">
    <label> FirstNAme:
        <input type="text"
        formControlName="firstName"
        class="form-control"
        placeholder="First Name"
        /></label>
    </div>
    <div class="col-md-3">
<label> LastName:
        <input type="text"
        formControlName="lastName"
        class="form-control"
        placeholder="Last Name"
        />
</label>
    </div>
    <div class="col-md-3">
<label> Job Title:
        <input type="text"
        formControlName="Job Title"
        class="form-control"
        placeholder="Job Title"
        />
</label>
    </div>
    <div class="col-md-3 col-sm-3">
        <select class="form-control"
        formControlName="gender">
            <option value="">Gender</option>
            <option value="M">male</option>
            <option value="F">female</option>
        </select>
    </div>
    <div class="col-md-3">
<label> AGE_FROM:
        <input type="text"
        formControlName="agefrom"
        class="form-control"
        placeholder="age from"
        />
</label>
    </div>
    <div class="col-md-3">
        <input type="text"
        formControlName="ageto"
        class="form-control"
        placeholder="age to"
        />
    </div>

    <div>
                <input type='search'  [(ngModel)]='searchTerm' [ngModelOptions]="{standalone: true}"
                      placeholder="search">
              </div>
</div>

pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchlabel'
})
export class SearchLabel implements PipeTransform {

  transform(value: any, args: any): any {
    if(!value)return null;
    if(!args)return value;

    args = args.toLowerCase();

    return value.filter(function (item){
      return JSON.stringify(item).toLowerCase().includes(args);
    });
  }

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...