angular - 如何在 Angular 6 中过滤 FormArray 元素

问题描述

我想通过在文本框中输入文本来过滤表单数组将过滤表单数组中的数据并返回匹配的行。

这是一个链接这是我尝试实现的 stackblitz 链接。我有数千个表单数组元素，我想过滤它并从下拉列表中选择相应的值，然后单击更新按钮将更新所有记录。


@Component({
  selector: 'app-form-array',
  templateUrl: './form-array.component.html',
  styleUrls: ['./form-array.component.css']
})
export class FormArrayComponent implements OnInit {
  form: FormGroup;
  searchText: String = '';
  devices: Array<any> = [];
  datasets: Array<any> = [];
  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      published: true,
      credentials: this.fb.array([]),
    });
  }
  ngOnInit() {
    this.devices = [
    { name: 'device1' },
    { name: 'device2' },
    { name: 'device3' },
    { name: 'device4' },
    { name: 'device5' },
    { name: 'device6' }
  ];
   this.datasets = [
    { name: 'dataset1' },
    { name: 'dataset2' },
    { name: 'dataset3' },
    { name: 'dataset4' },
    { name: 'dataset5' },
    { name: 'dataset6' }
  ];
    this.devices.forEach((device) => {
      this.addCreds();
    });
  }
  addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    creds.push(this.fb.group({
      dataset_name: ['', []],
      device_id: ['', []],
    }));
    this.devices.push({ name: 'device'+ (this.devices.length+1) });
  }
submit() {
  console.log(this.form.value.credentials);
}
}

<form [formGroup]="form" *ngIf="form">
    <input type="checkbox" formControlName="published"> Published
      <div *ngIf="form.controls.published.value">

        <h2>Credentials</h2>
        <button (click)="addCreds()">Add</button>
        <button (click)="submit()">submit</button>
        <br><br>
        <input placeholder="search device" [(ngModel)]="searchText" [ngModelOptions]="{standalone: true}">
        <br><br>
        <div formArrayName="credentials" *ngFor="let creds of form.controls.credentials?.value | formArrayFilterPipe: searchText; let i = index">
          <ng-container [formGroupName]="i">
            <table>
              <tbody>
                <tr>
                  <td>
                          {{devices[i]?.name}}
                  </td>
                  <td>
                    <select id="{{datasets[i]?.name + 'choice'}}" formControlName="dataset_name">
                        <option *ngFor="let dataset of datasets">{{dataset?.name}} </option>
                    </select>
                  </td>
                </tr>
              </tbody>
            </table>
          </ng-container>
        </div>

      </div>
    </form>```

标签： angular

检查这个

表单数组过滤器pipe.pipe.ts

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

@Pipe({
  name: 'formArrayFilterPipe'
})
export class FormArrayFilterPipe implements PipeTransform {

  transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;

    searchText = searchText.toLowerCase();
    return items.filter( it => {
      console.log('abc', it.value.device_id);
      return it.value.device_id.toLowerCase().includes(searchText);
    });
  }

}

输出

更新此代码并检查。如有任何疑问，请告诉我。

angular - 如何在 Angular 6 中过滤 FormArray 元素

问题描述

解决方案

推荐阅读