В моем приложении angular я использую поле поиска для поиска в нескольких полях формы. Каждое поле формы имеет метку и поле ввода. Каждая метка определяется отдельно. Я хочу использовать поле поиска в своей форме для поиска по всей форме и выделения только соответствующей метки, когда она будет найдена. Я не использую его для l oop для определения меток. Каждая этикетка уникальна. Как я могу это реализовать. Пожалуйста, помогите мне.
- Как я могу использовать вертикальную черту для каждого поля формы по отдельности или используя для l oop.
- Как я могу сопоставить текст и выделить соответствующую метку с вводимым текстом для поиска.
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);
});
}
}