Looping through form array inside form group angular

Question

I get list of data from server and i want to show them inside a list of spans as below:

Each row correspond to one item of list and note that I create this list with *ngFor as below:

this.myForm = this.fb.group({
            person: this.fb.array([
                this.fb.group({
                    name: [''],
                    address: ['']
                })
            ])
        })

<form [formGroup]="myForm">
      <div formArrayName="person" *ngFor="let person of serverData; let personIndex = index">
          <div [formGroupName]="personIndex">
              <input formControlName="name"/>
              <input formControlName="address"/>
          </div>
      </div>
</form>

After running this code the browser gives me this:

Error:

No value accessor for form control with path: 'person -> 0 -> name'

But I know that I should use myForm.controls.person.controls instead of serverData in for loop, but I want to have both list and controls together.

Should I use two for loops that one of them iterates over server data and the other one iterates over form controls or I should use another way?

You can't set formcontrolnames on a span. Why would you even need a form for this if you just show on spans? — AVJT82
– AVJT82, Commented Oct 5, 2019 at 12:26
This is a sample that similar to my real code. In reality there is an input with type:'hidden' near these spans @AJT82 — Kamran Taghaddos
– Kamran Taghaddos, Commented Oct 5, 2019 at 12:59
Ok. Imagine that there are two inputs instead of these spans. Would you please help me? — Kamran Taghaddos
– Kamran Taghaddos, Commented Oct 5, 2019 at 13:08
Yes I will help, please just provide a minimal reproducible example I don't know where these inputs are. As to your comment, if you just replace the spans with input, your code will work. — AVJT82
– AVJT82, Commented Oct 5, 2019 at 13:09

AVJT82 · Accepted Answer · 2019-10-06 11:09:26Z

1

You must push all objects from serverData to your formarray, so that the array lengths are the same as the serverData array. Your template stays as it currently is, but in component, map the values from serverData and push the objects with the properties you want to the formarray:

constructor(private fb: FormBuilder) {}

ngOnInit() {
  this.myForm = this.fb.group({
    persons: this.fb.array([])
  });
  this.data();
}

get person() {
  return this.myForm.get("persons") as FormArray;
}

private data() {
  this.serverData = [
    {
      name: "1",
      desc: "one"
    },
    {
      name: "2",
      desc: "two"
    },
    {
      name: "3",
      desc: "three"
    }
  ];

  this.serverData.map(d =>
    this.person.push(this.fb.group({ name: d.name, address: d.desc }))
  );
}

DEMO: STACKBLITZ

answered Oct 6, 2019 at 11:09

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

Comments

Eliseo · Accepted Answer · 2019-10-05 09:48:23Z

1

NOTE: I like the loop is n the div of fromGroupName

<form [formGroup]="myForm">
      <div formArrayName="person"> >
          <div *ngFor="let person of serverData; let personIndex = index"
               [formGroupName]="personIndex">
              <span formControlName="name">{{person.name}}</span>
              <span formControlName="address">{{person.address}}</span>
          </div>
      </div>
</form>

If you iterate over myForm.controls.person.controls, always formGroupName has value, if you has an array and declare BEFORE create the form, At very first state of the application, the FormArray is not created

answered Oct 5, 2019 at 9:48

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

1 Comment

Kamran Taghaddos Over a year ago

As i shown in my question i do not use 'myForm.controls.person.controls'. Now i set values in ngAfterViewInit() as you said that i do not declare array before create form. But still do not working.@Eliseo

Collectives™ on Stack Overflow

Looping through form array inside form group angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related