Angular redux/forms bind to nested element

Question

I'm currently trying to bind a form to my redux store following this( template driven)

so lets say i have the following structure:

{   
 person {
  personName: string,
  address {
   street: string,
   city: string
  }
 }
}

Now i want to bind this to a form:

<form [connect]=['person']>
 <input type="text" name="personName">
 <!-- now i want to show the street and city -->
 <input type="text" name="street">
 <input type="text" name="city">
</form>

How do i tell the form that i want to add address to the path so i can bind streetand cityto my store?

have you already some typescript code inside your controller? — messerbill, Mar 07 '18 at 12:24
no i think in angular 2 - 5 (i am talking about that typescript class named like your component) — messerbill, Mar 07 '18 at 12:28
yes, my component does contain some logic, but none of which affects this — kodeaben, Mar 07 '18 at 12:29

score 0 · Answer 1 · answered Mar 07 '18 at 14:18

So i found the solution:

<form [connect]=['person']>
  <input type="text" name="personName">
  <!-- now i want to show the street and city -->
  <div [ngModelGroup]="'address'">
   <input type="text" name="street">
   <input type="text" name="city">
  </div>
</form>

I pass the address as a string to the modelGroup and this creates the necessary link in the path

Angular redux/forms bind to nested element

1 Answers1