Setting up template in Angular to match formArray values in a reactive form

Question

I'm trying to make a reactive form in angular that's formatted form my API. I understand I can do some data transformation after the fact to get what I need, but I would like to know if I can set the form up this way.

It's simplified a little, but this code get's me the exact format I'm looking for.

myForm = this.fb.group({
  fieldOne: [''],
  fieldGroup: this.fb.array([
    this.fb.group({
      groupId: [1],
      myValue: []
    }),
    this.fb.group({
      groupId: [2],
      myValue: []
    }),
    this.fb.group({
      groupId: [3],
      myValue: []
    })
  ])
});

My question is how do I set this form up in my template so I can set myValue for each of the items in fieldGroup?

https://stackblitz.com/edit/angular-ivy-gv4zd6?file=src/app/app.component.html

H3AR7B3A7 · Accepted Answer · 2021-11-23 20:34:09Z

1

Original Answer

I'm not entirely sure but I think your formgroups need a name:

myForm = this.fb.group({
  fieldOne: [''],
  fieldGroup: this.fb.array([
    name1: this.fb.group({
      groupId: [1],
      myValue: []
    }),
    name2: this.fb.group({
      groupId: [2],
      myValue: []
    }),
    name3: this.fb.group({
      groupId: [3],
      myValue: []
    })
  ])
});

Example html:

<form novalidate
          (ngSubmit)="saveProduct()"
          [formGroup]="myForm">
    <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label"
               for="fieldOneId">fieldOne</label>
        <div class="col-md-8">
          <input class="form-control"
                 id="fieldOneId"
                 type="text"
                 formControlName="fieldOne"/>
        </div>
    </div>
    <div formArrayName="fieldGroup">
        <div formGroupName="name1">
            <div class="form-group row mb-2">
                <label class="col-md-2 col-form-label"
                   for="groupIdId">groupId</label>
                <div class="col-md-8">
                    <input class="form-control"
                         id="groupIdId"
                         type="number"
                         formControlName="groupId"/>
                </div>
                <!-- Repeat -->
            </div>
            <!-- Repeat -->
        </div>
    </div>
</form>

Update

You can actually nest objects in you form object. You can either use FormsModule and bind to some object initialized in your component.

But I figured you would want to stay with reactive forms. And noticed you can also nest other form objects inside the original one.

item1: Item = new Item();

subForm = this.fb.group({
  groupId: [''],
  myValue: ['']
})

myForm = this.fb.group({
  fieldOne: [''],
  fieldGroup: this.fb.array([
    this.item1, // <-- With 2-way binding through FormsModule
    this.subForm // <-- Nesting other form objects with ReactiveFormsModule
  ])
});

Here is a Stackblitz with both examples.

Example output:

{
  "fieldOne":"bleh",
  "fieldGroup":[
    {"groupId":1,"myValue":2},
    {"groupId":3,"myValue":4}
  ]
}

edited Nov 23, 2021 at 20:34

answered Nov 23, 2021 at 1:05

H3AR7B3A7

5,3593 gold badges22 silver badges42 bronze badges

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

4 Comments

H3AR7B3A7 Over a year ago

Note that I didn't test this. Let me know if it helped you out, if not I will gladly take a closer look later. Feel free to edit any mistakes for reference as well. Creating a Stackblitz also makes it easier to help you if needed.

Jared Whipple Over a year ago

I'm trying to do it without a name. I guess I'm not sure if it's even possible, and I just need to transform the data.

H3AR7B3A7 Over a year ago

I will read up on it later and let you know if I find anything.

H3AR7B3A7 Over a year ago

@Jared Whipple - I added an update to my original answer. Let me know how it goes. Cheers

Collectives™ on Stack Overflow

Setting up template in Angular to match formArray values in a reactive form

1 Answer 1

Original Answer

Update

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Original Answer

Update

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related