Angular multiple form values in ngFor

Question

hope somebody can help me? I'm building a form in my component like this (Version not running):

<div *ngFor="let status of someService.monitoringStatus">
 <form name="form" [formGroup]="form" (ngSubmit)="updateStatus(form.value,status.id)">
  <input type="text" formControlName="next_status" value="{{status.old_status}}">
 </form>
</div>

The problem now is that I can't get {{status.old_status}} in my input as value. But why? If I am using it outside it shows me right.

Edit (my component.ts looks like this):

  form = new FormGroup({
    next_status: new FormControl('', Validators.required)
  })


  updateStatus(value,id: any){
    this.someService.updateStatus(value,id).toPromise().then((data: any) => {  console.log(data)
    }).catch((err: HttpErrorResponse) => {
      console.error('Fehler:', err.error);
    });
  }

Why is the form element inside the *ngFor loop? You are creating as many form elements as the status count. — Benny Halperin
– Benny Halperin, Commented Dec 3, 2020 at 6:10
That is right. I need solution to send forms based of ngFor. — SaschaK
– SaschaK, Commented Dec 3, 2020 at 12:06

PMO1948 · Accepted Answer · 2020-12-03 07:25:13Z

1

So you have your forms inside an *ngFor - but they all have the same name, so how can the code distinguish between them? They must all have unique names. If you add an index, you can give them unique names

<div *ngFor="let status of someService.monitoringStatus; let i=index;">
 <form name="form{{i}}" [formGroup]="form{{i}}" (ngSubmit)="updateStatus(form{{i}}.value,status.id)">
  <input type="text" formControlName="next_status{{i}}" value="{{status.old_status}}">
 </form>
</div>

Then you can use {{i}} to distinguish them from each other

answered Dec 3, 2020 at 7:25

PMO1948

2,5841 gold badge17 silver badges43 bronze badges

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

5 Comments

SaschaK Over a year ago

Hi, thanks for reply my question. I thought about this solution before. But how does my component.ts has to look like with form = new FormGroup({ .... ??

PMO1948 Over a year ago

declare your forms as form0, form1,... If you include you ts code, I could help you with syntax based on what you have

PMO1948 Over a year ago

where do you get someService.monitoringStatus from? Is it an array? What is its type? In theory, you can make an array of forms, then if someService.monitoringStatus gives an array, run a foreach on it where you add another new form to the array. And then in HTML, forms[i] instead of form{{i}}

SaschaK Over a year ago

I created a repo which describes problem perfectly. github.com/sascha284/forms

PMO1948 Over a year ago

the link is broken

Collectives™ on Stack Overflow

Angular multiple form values in ngFor

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related