如何过滤显示在表格中的有角度的 FormArray 数据 [英] How to filter angular FormArray data which is displayed in a table

问题描述

我想当我在名称输入字段中输入名称来过滤 FormArray 数据时，并排序到输入框表单FormArray数据控件中输入的内容

 <tr class="custom";*ngFor=让卡片的卡片阵列().控制；索引为 i；"[formGroupName]=i"><td class=pr-0"><input [attr.id]="'name'+i";class="form-control form-control-sm";formControlName=名称"[只读]=真"></td></tr></tbody>

解决方案

Observables 来救援！:)

将表单控件附加到您的搜索字段，监听它的变化并过滤值.向模板返回一个 observable 并在那里使用异步管道.这是一个示例，您只需更改变量名称即可满足您的需要:

带有表单控件的输入:

假设您的表单如下所示:

this.myForm = this.fb.group({formArr: this.fb.array([这个.fb.group({formCtrl: ['一个']}),//... 更多的])});//只是你的 formarray 的一个 getter获取 formArr() {return (this.myForm.get('formArr') as FormArray).controls;}

然后在组件中监听更改并执行上述过滤器.如果用户打字速度很快，我喜欢在制作过滤器之前放置一个轻微的去抖动时间.

然后是过滤后的 formArr$ 变量(这是一个 observable):

formArr$ = this.searchCtrl.valueChanges.pipe(从...开始('')，去抖动时间(300)，switchMap((val: string) => {return of(this.formArr as AbstractControl[]).pipe(map((formArr: AbstractControl[]) =>formArr.filter((group: AbstractControl) => {返回 group.get('formCtrl').value.toLowerCase().includes(val.toLowerCase());})));}));

然后在模板中使用 async 管道:

<div *ngFor="let group of formArr$ |异步；让 i = 索引"><div formArrayName="formArr"><div [formGroupName]=i"><input formControlName="formCtrl">

就是这样！这是一个演示 用上面的代码

I want when I type the name in the name input field to filter the FormArray data, and sort to what has been typed in the input box form FormArray data controls

 <tbody formArrayName="cards">
                  <tr class="custom" *ngFor="let card of cardsArray().controls; index as i; " [formGroupName]="i">
                    <td class="pr-0">
                      <input [attr.id]="'name'+i" class="form-control form-control-sm" formControlName="name"
                        [readonly]="true">
                    </td>
                    </tr>
                    </tbody>

解决方案

Observables to the rescue! :)

Attach a form control to your search field, listen to the changes of it and filter the values. Return an observable to the template and use the async pipe there. Here is a sample for you, you just need to change the variable names to fit your needs:

The input with the form control:

<input [formControl]="searchCtrl" placeholder="Search"/>

Let's say your form looks like this:

this.myForm = this.fb.group({
  formArr: this.fb.array([
    this.fb.group({
      formCtrl: ['one']
    }),
    //... more
  ])
});

// just a getter for your formarray
get formArr() {
  return (this.myForm.get('formArr') as FormArray).controls;
}

Then listen in the component for the change and do the above mentioned filter. I like to put a slight debounce time before making the filter, if the user types fast.

Then the filtered formArr$ variable (which is an observable):

formArr$ = this.searchCtrl.valueChanges.pipe(
  startWith(''),
  debounceTime(300),
  switchMap((val: string) => {
    return of(this.formArr as AbstractControl[]).pipe(
      map((formArr: AbstractControl[]) =>
        formArr.filter((group: AbstractControl) => {
          return group.get('formCtrl').value
           .toLowerCase()
           .includes(val.toLowerCase());
        })
      )
    );
  })
);

Then just use the async pipe in template:

<div *ngFor="let group of formArr$ | async; let i = index">
  <div formArrayName="formArr">
    <div [formGroupName]="i">
      <input formControlName="formCtrl">
    </div>
  </div>
</div>

That's it! Here is a DEMO with the above code

这篇关于如何过滤显示在表格中的有角度的 FormArray 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！