有没有办法以角度反应形式搜索（过滤）FormArray？答案

【问题标题】：Is there a way to search(filter) the FormArray in angular reactive forms?有没有办法以角度反应形式搜索（过滤）FormArray？
【发布时间】：2020-01-10 01:11:40
【问题描述】：

我正在寻找角度反应形式的用例，以根据键过滤 FormArray 中的动态表单控制输入字段。我附上了我的实现的屏幕截图。在搜索框中，我需要搜索以下属性基于键。

【问题讨论】：

您是否尝试在初始化之前对表单元素进行排序？即按字母顺序排序？或者您是否希望根据用户输入对控件进行排序？如果是前者，那么您可以在创建表单组之前简单地在属性数组上使用排序方法。这应该会导致您的表单控件被排序。查看 stackblitz 示例，如果您希望在用户添加新属性时对控件进行排序，则可以在当前拥有的“addproperty”方法中使用相同的排序方法

标签： angular filter angular7 angular-reactive-forms formarray

【解决方案1】：

FormArray 扩展自 AbstractControl 类 which exposes a valueChanges observable with the latest values。在您的表单中输入的所有值都可以作为 POJO 在此流的值中使用。您可以将此流与您的查询结合起来，并过滤符合您条件的值。哎呀，您的搜索查询可能与带有键值对的 FormArray 位于同一个 FormGroup 中。

// ngOnInit for instance
form$.valueChanges.pipe(
  map(value => {
    // here, filter your key value pairs which meet your criteria and give them back in a way you can build your form in the HTML
  })
);

困难的事情是将你的源 observable 映射到你可以在你的 HTML 模板中使用的东西，这样你仍然可以将相应的 FormControl 绑定到输入。因此，您的 HTML 可能看起来与标准 FormArray 示例略有不同，因为您不能 *ngFor 直接通过您的表单，而是通过自定义构建的流。您仍然可以通过 [formControl]="myMethodToGetTheRightControl(blabla)" 将每个输入绑定到相应的 FormControl，而无需使用 formArrayName、formGroupName 和 formControlName。

所以也许它不是那么简单，但它可以做到。如果你用你的（部分）代码给一个堆栈闪电战，我可以为你制定我的概念来说明我的意思。

【讨论】：

嘿乔普，这是我的 stackblitz 链接。 Stackblitz - Angular
So, here is my implementation。我不得不使用 formControl 指令将每个 FormControl 绑定到输入。此外，我不得不使用 FormControl 的 updateOn: 'blur' 选项来防止用户在更新键或值时干扰过滤技术。还有一些关于 HTML/CSS 的提示：即使在使用 Bootstrap 时，也尽量少用 DOM 节点来加快浏览器的速度，并保持 HTML 模板的整洁。当一个语义类名，然后应用你的.css文件中的样式。
是的，乔普。感谢您的努力，这就是我一直在寻找的。也感谢您的提示。