Dynamically Create Multiple FormControls from a Data Set in Angular
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.
Instructor: [00:00] Our simple dynamic form here works, as you can see here from the binding, but it is quite limited because normally, you don't have just two fields, but you have a couple fields. Let's see how we could render even a more complex object.
[00:14] Let's create here a person, and directly initialize it with a first name property and some age. We can now do the same thing which we did before, but now by iterating over those person objects' properties.
[00:27] Let's take here out our form object and initialize it to an empty one, and now we basically iterate over our person object above. We can do that by using the object.keys, and now we simply say the form data object, and we set a new property, which will be the property of our person here, and we initialize it to the according value.
[00:52] As you can see, we create here a form control. We associate it to our form data model, and then we store everything inside here. Next, we need here below to remove that inline form definition, and basically assign our form data object.
[01:09] You can now see that our form value array reflects our updated form, so you can see the first name and age property. Now we also need to render basically input fields for each of our properties which we have.
[01:20] First of all, let's store the person property names here, and here while we iterate over these properties, we also update here our array and push in the property name. This is quite handy, because now we can use this structure here to iterate over in our template.
[01:40] We create here a div, such that each input field gets its new line, and we use a simple NG4, and we iterate over those person properties. You can imagine that the next step here is to simply change this from the field name to the property, which will be the person property, and if we save here, you can see how the values get reflected.
[02:02] Also, if we now have a person object, then we want also surname property, and maybe even a Twitter handle. We can simply save here, and you see that without any change in our template, it gets reflected on the UI, and it also data mines properly.
Right 👍, that would even be more elegant, thx 🙂
what if we'd get the Person info asynchronously?
@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.
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