Is there a way to search(filter) the FormArray in angular reactive forms?

Question

I'm looking for a use-case in angular reactive forms to filter the dynamic form control input field in FormArray based on key.I have attached a screenshot of my implementation.In the search box i need to search the below properties based on the keys.

Answer 1

FormArray extends from the AbstractControl class which exposes a valueChanges observable with the latest values . All the values which are entered in your form are available as a POJO in the values of this stream. You could combine this stream with your query and filter the values which meet your criteria. Heck, your search query might be in the same FormGroup as your FormArray with the key value pairs.

// 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
  })
);

The hard thing is to map your source observable to something you can use in your HTML template so you can still bind the corresponding FormControl to the input. So your HTML might look a little different than the standard FormArray example because you cannot *ngFor directly through your form, but through a custom built stream. You can still bind every input to the corresponding FormControl by just doing [formControl]="myMethodToGetTheRightControl(blabla)" without the use of formArrayName , formGroupName and formControlName .

So maybe it is not so simple, but it can be done. If you give a stackblitz with your (partial) code, I can work out my concept for you to show what I mean.