如何在 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>

由于我事先不知道输入的名称，我该如何提交此表单。 我的 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>

动态表单控件示例并通过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 ?

看看这个?Angular Form ✨很有帮助