Как отправить динамически созданную форму в Angular

Question

У меня есть форма со многими полями ввода, которая динамически создается с помощью привязки:

<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>

Как мне отправить эту форму, поскольку я заранее не знаю имен входов. Что должно go в моем обработчике события onSubmit ()?

Вот код компонента:

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);

  }
}

Answer 1

вам просто нужно поместить кнопку с типом submit внутри тега формы, чтобы при нажатии кнопки запускалось событие отправки, и если вы хотите получить доступ к данным формы, вы можете создать ссылку на директиву ngForm

пример

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

пример элементов управления Dynami c и установка начального значения с помощью 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 ?

отметьте это 101 Angular Форма ✨ это очень полезно