Nested Angular Form Groups - Form must reflect HTML structure

Question

Say I have the following formGroup structure:

userGroup = {
   name,
   surname,
   address: {
      firstLine,
      secondLine
   }
}

This forces me to write HTML similar to the following:

<form [formGroup]="userGroup">
   <input formControlName="name">
   <input formControlName="surname">

   <div formGroupName="address">
      <input formControlName="firstLine">
      <input formControlName="secondLine">
   </div>
</form>

Let's say, just for the sake of the example, that you are constrained to write HTML that looks like this:

<form [formGroup]="userGroup">
   <input formControlName="name">
   <input formControlName="surname">

   <div formGroupName="address">
      <input formControlName="firstLine">
   </div>

   <hr>
   <div formGroupName="someOtherGroup">
       <input id="problemSecondLine" formControlName="???.secondLine">
  </div>
</form>

Is there a way, to force the field with id=problemSecondLine to be under userGroup -> address -> secondLine, even though, visually, I have no option but to place it under this particular DIV?

I guess I can manually update via ngModel - but I'm trying to find the cleanest way possible.

yurzui · Accepted Answer · 2017-09-30 18:33:35Z

1

You can use formControl directive instead of formControlName

<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">

Plunker Example

answered Sep 30, 2017 at 18:33

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

Collectives™ on Stack Overflow

Nested Angular Form Groups - Form must reflect HTML structure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related