I need to create a search input that filters a list of sub-accounts within each parent account. Currently, typing in either input filters all accounts instead of only the associated account.
Live Examples (StackBlitz)
Basic (no FormArray)
With FormArray
Requirements
- The number of accounts and sub-accounts is unknown (1...*)
- Each account requires it's own search input (FormControl) in the HTML
- Typing in input A should filter the list for account A only.
Typing in input B should filter the list for account B only.
Questions
How can I ensure that each FormControl only filters the account in the current *ngFor context?
How can I independently watch an unknown number of FormControls for value changes? I realize I can watch the FormArray, but I'm hoping there's a better way.
Ideally, the solution should:
- Use Reactive Forms
- Emit an Observable when the value changes
- Allow FormControls to be added/removed from the form dynamically
searchTerm
property but you have multiple arrays you are trying to filter. You will need to find a way to make each search box unique (probably usingind
from the parent repeater), and have a uniquesearchTerm
per sub-repeater. – Claies