How to submit a dynamically created form in Angular

Question

I have a form with many input fields that is dynamically created through binding:

<form method="post" (ngSubmit)="onSubmit()">
<div class="row">
  <div *ngFor="let p of Model.products" class="col-lg-2 col-md-4 col-sm-6" style="text-align:center">
    <p>{{p.name}}</p>
    <input name="stock:{{p.id}}" value="{{p.stock}}" type="text" class="form-control" autocomplete="off" onkeypress="return event.charCode >= 48 && event.charCode <= 57" />
    <img src="{{p.imgPath}}" style="max-width:120px" />
  </div>
</div>
<div style="text-align:right">
  <button type="submit" class="btn btn-outline-primary">Submit</button>
</div>
  </form>

How do I submit this form since I don't know the names of the inputs in advance. What should go in my onSubmit() event handler?

Here is the code of the component:

import { Component, Inject, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AuthService } from "../services/auth.service";

@Component({
  selector: "admin-stocks",
  templateUrl: "stocks.component.html"
})

export class AdminStocksComponent implements OnInit{
  Model: ProductListModel;
  IsAdministrator: boolean = false;
  constructor(@Inject("BASE_URL") private baseUrl: string, private http: HttpClient,
                 private authService: AuthService) { }

  ngOnInit() {
    this.authService.isAdministrator().subscribe(res => this.IsAdministrator = res,
      error => console.error(error));

    var url = this.baseUrl + "api/ajax/GetProducts";
    this.http.get<ProductListModel>(url).subscribe(res => { console.log(res); this.Model = res; },
      error => console.error(error));
  }
  getPagesArray(n) {
    return new Array(n);
  }
  onSubmit(e) {
    console.log(e);

  }
}

Many useful informations are missing in the code: are you updating Model.products at some point? How are you supposed to call the server? A traditional url-encoded HTTP Post or an Ajax call? Try to describe the "shape" of the data you want to send. Without that information, we cannot know what the answer should look like. — Alberto Chiesa
– Alberto Chiesa, Commented Apr 15, 2020 at 11:10
I am updating the object Model in the onInit with an httpclient get. i want to call the server using httpclient with a post request. The data i want to send is the form itself that consists in a dictionary key value, where the key is the id of the product and the value is the stock of the product which is the value of the input of the form — user1238784
– user1238784, Commented Apr 15, 2020 at 11:17

Muhammed Albarmavi · Accepted Answer · 2020-04-15 10:36:24Z

1

you just need to put the button with type submit inside the form tag so when the button clicked the submit event will trigger, and if you want the get access to form data you can create a refreance of ngForm directive

example

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
    <input type="text" name="userName" ngModel>
    <button type="submit"> submit</button>
</form>

example of dynamic form controls and set the inital value by ngModel

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
 <input 
    *ngFor="let p of controls" 
     type="text" 
     [name]="p.id" 
     [ngModel]="p.value">
  <button type="submit"> submit</button>
</form>

demo 🚀

check this 👉 Angular Form ✨ it's very helpful

edited Apr 15, 2020 at 10:36

answered Apr 15, 2020 at 10:15

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

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

6 Comments

user1238784 Over a year ago

if i add ngModel to the field its bound value disappears

Muhammed Albarmavi Over a year ago

you can set the initail value like this [ngModel]="p.value" and everything will work fine

user1238784 Over a year ago

i see now it works, but what kind of object i get in onSubmit. Is it formdata? Can I post it to a controller and then receive it as form data?

Muhammed Albarmavi Over a year ago

the value you get is base of the form inputs any and the fomm controls keys ill be base of the name property

user1238784 Over a year ago

How do I loop through the form.value in order to get a key-pair dictionary. i tried for (var key in f.value) { console.log(key); } this gives me the keys but not the values

|

Collectives™ on Stack Overflow

How to submit a dynamically created form in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related