有没有办法以 angular 反应形式搜索(过滤)FormArray?
Is there a way to search(filter) the FormArray in angular reactive forms?
我正在 angular 反应式表单中寻找一个用例,以根据 key.I 过滤 FormArray 中的动态表单控件输入字段已附上我的 implementation.In 的屏幕截图我需要根据键搜索以下属性的搜索框。
FormArray 从 AbstractControl class 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
})
);
困难的是将您的源可观察对象映射到您可以在 HTML 模板中使用的东西,这样您仍然可以将相应的 FormControl 绑定到输入。所以你的 HTML 可能看起来与标准的 FormArray 示例有点不同,因为你不能 *ngFor 直接通过你的表单,而是通过自定义构建的流。您仍然可以通过 [formControl]="myMethodToGetTheRightControl(blabla)"
将每个输入绑定到相应的 FormControl,而无需使用 formArrayName
、formGroupName
和 formControlName
.
所以也许不是那么简单,但是可以做到。如果你用你的(部分)代码给出一个 stackblitz,我可以为你制定我的概念来展示我的意思。
我正在 angular 反应式表单中寻找一个用例,以根据 key.I 过滤 FormArray 中的动态表单控件输入字段已附上我的 implementation.In 的屏幕截图我需要根据键搜索以下属性的搜索框。
FormArray 从 AbstractControl class 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
})
);
困难的是将您的源可观察对象映射到您可以在 HTML 模板中使用的东西,这样您仍然可以将相应的 FormControl 绑定到输入。所以你的 HTML 可能看起来与标准的 FormArray 示例有点不同,因为你不能 *ngFor 直接通过你的表单,而是通过自定义构建的流。您仍然可以通过 [formControl]="myMethodToGetTheRightControl(blabla)"
将每个输入绑定到相应的 FormControl,而无需使用 formArrayName
、formGroupName
和 formControlName
.
所以也许不是那么简单,但是可以做到。如果你用你的(部分)代码给出一个 stackblitz,我可以为你制定我的概念来展示我的意思。