Dynamically Create Multiple FormControls from a Data Set in Angular

Share this video with your friends

Send Tweet

In this lesson we will take a look how to create a more complex but also more real-world example. We’re creating a simple person object and by iterating over its properties we dynamically create multiple FormControl instances using Angular’s reactive forms approach.

Y. Mayer
Y. Mayer
~ 6 years ago

no need to extra push the keys to the personProps. you can just instantiate it directly with personProps = Object.keys(this.person) and then use the personProps instead: for (const key of personProps). edit: never mind, saw the next video now

Juri Strumpflohner
Juri Strumpflohner(instructor)
~ 6 years ago

Right 👍, that would even be more elegant, thx 🙂

jokers
jokers
~ 5 years ago

what if we'd get the Person info asynchronously?

Juri Strumpflohner
Juri Strumpflohner(instructor)
~ 5 years ago

@Chrys: sorry missed your question. You have different options. Either you wait until the data has been retrieved and then you render the form. Or you render the form independently from the data and then use it's form.patchValue(...) or form.setValue(..) accordingly.