如何在Angular 6中过滤FormArray元素_我正在使用FormArray，并且在另一个控件中有控件，但是如何在angular的嵌套控件中添加元素 - 腾讯云开发者社区

如何在Angular 6中过滤FormArray元素

在Angular 6中过滤FormArray元素的方法如下：

首先，确保你已经导入了FormsModule和ReactiveFormsModule模块。
在组件类中，创建一个FormArray对象，并将其初始化为空数组。

import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="myArray">
        <div *ngFor="let control of myForm.get('myArray').controls; let i = index">
          <input type="text" [formControlName]="i">
        </div>
      </div>
    </form>
  `,
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myArray: new FormArray([])
    });
  }
}

在组件类中，创建一个方法来过滤FormArray元素。该方法接受一个过滤条件作为参数，并返回一个新的FormArray对象，其中只包含符合条件的元素。

import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <div formArrayName="myArray">
        <div *ngFor="let control of filteredArray.controls; let i = index">
          <input type="text" [formControlName]="i">
        </div>
      </div>
    </form>
  `,
})
export class ExampleComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      myArray: new FormArray([
        new FormControl('apple'),
        new FormControl('banana'),
        new FormControl('cherry')
      ])
    });
  }

  get filteredArray(): FormArray {
    const filterValue = 'a'; // 过滤条件，这里假设为字母'a'
    const array = this.myForm.get('myArray') as FormArray;
    const filteredControls = array.controls.filter(control =>
      control.value.includes(filterValue)
    );
    return new FormArray(filteredControls);
  }
}

在上述示例中，我们创建了一个FormArray对象，并将其初始化为包含三个FormControl的数组。然后，我们创建了一个名为filteredArray的getter方法，该方法使用filter函数过滤出符合条件的元素，并返回一个新的FormArray对象。在模板中，我们使用filteredArray来循环显示过滤后的元素。

这是一个简单的示例，你可以根据实际需求来修改过滤条件和FormArray的初始值。同时，你也可以根据需要添加其他表单控件和验证规则。

腾讯云相关产品和产品介绍链接地址：