1

I am trying to build a Search form with some filters. However, can't figure out how to configure ages range inputs (age from & to inputs). Here is the code:

type Script

export class SearchComponent implements OnInit {
  SearchForm: FormGroup;
  forbiddenEmails: any;
  errorMessage: string;

  constructor (
     {

  }


  ngOnInit() {
 this.nav.hide(); 
 this.SearchForm = new FormGroup({
       'name': new FormControl(null, [Validators.required,
      Validators.pattern('(?=.*[a-z])(?=.*[A-Z])'),
       ]),
    });
}

onSubmit() {
   this.SearchForm.reset();
}

HTML

<div class="container">
 <div class='row row1'>
   <div class="col-md-12"
 <form action="" [formGroup]="SearchForm" (ngSubmit)="onSubmit()">
        <div class="form-group form-search">
        <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="name" type="text" id="name" formControlName="Name"/>
        <span *ngIf="!SearchForm.get('name').valid && SearchForm.get('name').touched" class="help-block">Please enter a valid name!</span>
    </div>
</div>
 <div class='row'>
   <div class="col-md-6"
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Age From">
  </div>
<div class="col-md-6"
  <div class="input-group">
    <input type="text" class="form-control" placeholder="To">
</div>
</div>
<div class="row">
<div class="col-md-4">
 <button type="submit" class="  btn form-btn btn-lg btn-block">Search</button>
</div>
</div>
</div>

How can I configure the last 2 inputs called age from and to which must be used for age ranges like ages from 18 - 65 for example. So people can filter the results between the ages which they type on those 2 inputs?

2 Answers2

0

I suggest you may use Slider range for ages .
there is a powerful slider range for angular .
like : https://www.npmjs.com/package/ng5-slider

Yahya Essam
  • 1,832
  • 2
  • 23
  • 44
0

If you really want to do it manually you can make use of Angular pipes.

With pipes, you can filter (transform) data in any way you want. The example used in the angular tutorial is to transform data formats but here on stack overflow there are a lot of threads for lists like this or this (personal favorite to understanding pipes)

your transform would look something like this:

transform(value: any, args?: any): any {
if(!args)
 return value;
return value.filter(
  item => item.age > args[0] && item => item.age < args[1])

); }

Given your args[0] is your lower boundry and args1 is your upper boundry

Rob Rombouts
  • 88
  • 9
  • Thanks for replying. How should I implement this in the SearchForm group of Search component in Typescript and HTML? –  Oct 24 '18 at 10:03
  • You can double bind your `Age from` and `To` to variables and where you display the results you can put something like this `*ngFor="let item of (items | myPipe: 'from':'To')`. This way every update you do will transform your results live. Also, you can swap the `args?: any` in the transform with `from: number, to: number` – Rob Rombouts Oct 24 '18 at 11:02