Angular - How to initiate FormArray from an existing array?

Question

I would like to create an editable table with FormArray.

For this, I have the results attribute that is rendered in the table.

What's the proper way to initialize it with FormArray data?

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
  this.tableForm = this.fb.group({
    arrayForm: this.fb.array([])
  });
}

not sure, but if you're referring to the idea of creating a reactive form based on an existing interface. it's not possible yet. — Stavm
– Stavm, Commented Sep 27, 2019 at 9:59
No, I wanna initiate formarray from existing array. 'results' is an array, I wanna put all the date to a FormArray. — Liem
– Liem, Commented Sep 27, 2019 at 10:01
@Liem you can check this: alligator.io/angular/reactive-forms-formarray-dynamic-fields it explains it quite well — Stavm
– Stavm, Commented Sep 27, 2019 at 10:02

user4676340 · Accepted Answer · 2019-09-27 10:16:32Z

11

A form array is a bundle of form controls (as a reminder, a form group is a form control).

In the following I will assume your results are model-related, such as

[
  { id: 1, title: 'title 1' },
  { id: 2, title: 'title 2' },
]

(If not, feel free to explain to me what the results are)

Since a form array must accept controls, you will have to map your results to comply with the signature.

You can do it with this :

ngOnInit(private fb: FormBuilder) {
 this.tableForm = this.fb.group({
   arrayForm: this.fb.array(this.results.map(r => this.fb.group(r)))
 });
}

With this, your form array will contain a form group, made of all the properties in your object.

Is this what you wanted or not ?

answered Sep 27, 2019 at 10:16

user4676340

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

1 Comment

DJ22T Over a year ago

why are you passing the FormBuilder as a parameter on the ngOnInit instead of injecting it in the constructor?

Stavm · Accepted Answer · 2019-09-27 10:15:16Z

You can create an array based on the OBJECT(not an interface).

I actually wrote a small demo a few days ago:

our OBJECT (!):

 valueFromBackend = {
    propOne: 'X',
    propTwo: 'Y',
    propArray: [
      {
        objPropA: 'a',
        objPropB: 'b'
      },
      {
        objPropA: 'c',
        objPropB: 'd'
      },
      {
        objPropA: 'e',
        objPropB: 'f'
      }
    ]
  }

Component:

ngOnInit() {
    const count = this.valueFromBackend.propArray.length

    this.myForm = this.fb.group({
      propOne: '',
      propTwo: '',
      propArray: this.fb.array([...this.createItems(count)])
    });

    // dynamically set value
    this.myForm.setValue(this.valueFromBackend);
  }

  private createItem(): FormGroup {
    return this.fb.group({
      objPropA: '',
      objPropB: '',
    });
  }

  private createItems(count: number): FormGroup[] {
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push(this.createItem());
    }
    return arr;
  }

HTML:

<form [formGroup]="myForm">
    <div formArrayName="propArray" *ngFor="let item of myForm.get('propArray').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="objPropA" placeholder="Item name">
      <input formControlName="objPropB" placeholder="Item description">
  </div>
  </div>
</form>

Collectives™ on Stack Overflow

Angular - How to initiate FormArray from an existing array?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related