1

In my Angular material project. On one reactive form I need to dynamically add multiple autocomplete fields. All autocomplete fields have a different array of options prefetched from a service onInit.

Current static exmaple on StackBlitz.

My question is: how can What changes should I make to 1. make sure not to repeat the code in template and ts file, as you can see all the filter* observables and reparative template code is quickly getting out of hand. 2. dynamically add more fields based on data from the backend. Backend data will have information about the list of options, labels, placeholders, control name etc.

Improve this question
2
  • This answer shows how to dynamically add Angular Material controls: Angular: How to dynamically add FormControl. Rather than waiting for user events, the dynamic components could be render as soon as data is fetched from the server. Commented May 10, 2020 at 16:27
  • Thank you for the comment, I understand the part on how to add a formcontrol to formGroup in the component file. The problem I am facing is with the autocomplete field. Each autocomplete field requires "filtered Observable array" of values. Also each autocomplete field requires template variable. My question is more of how to have array of autocomplete fields on a form? Commented May 11, 2020 at 5:11

1 Answer 1

Reset to default
1

I finally ended up writing my own FormField by implementing MatFormFieldControl having Typeahed support. Only thing that is limiting is right now the typeahead accepts prefetched values. In next iteration I'd love to provide typeahead with webservice support.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.