Question

我正在尝试使用一些过滤器来构建搜索表单。但是，无法弄清楚如何配置年龄范围输入（从＆到输入的年龄）。这是代码：

类型脚本

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>

如何配置最后2个输入，称为age from和to，必须用于年龄范围（例如18至65岁）。这样人们就可以在这两个输入中键入的年龄之间过滤结果？

Answer 1

如果您真的想手动进行操作，可以使用 Angular pipes。

使用管道，您可以按任意方式过滤（转换）数据。角度教程中使用的示例是转换数据格式，但是在堆栈溢出的情况下，列表this或this (personal favorite to understanding pipes)

中有很多线程

您的变换看起来像这样：

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

）; }

鉴于您的args [0]是您的下界，而args 1是您的上界

Answer 2

我建议您可能会使用Slider范围。有一个强大的角度范围滑块。
像：https://www.npmjs.com/package/ng5-slider

如何在此表单上配置年龄输入，以使搜索表单在Angular中正常工作？

2 个答案: