时间戳

首页 > 解决方案 > Angular 6：表单提交因表单未连接而取消

angular - Angular 6：表单提交因表单未连接而取消

问题描述

我正在尝试构建一个表单，但我收到“表单提交因表单未连接而被取消”警告。

删除了一些输入以使其更具可读性。

HTML：

<form name="newProduct" id="newProduct" (ngSubmit)="saveNewProduct()" [formGroup]="newProduct">
  <label for="productId">Id</label><br />
  <input name="productId" id="productId" type="number" formControlName="productId" placeholder="productId" autocomplete="off" />
   <m-spinner-button [options]="spinner" type="submit" (click)="modal.close()">ADD PRODUCT</m-spinner-button>
</form>

组件.ts

  newProduct = new FormGroup({
    productId: new FormControl("")
  });

  saveNewProduct(){
    console.log(this.newProduct.value)
  }

这里有什么问题，应该连接？

标签： angularangular-forms

解决方案

如果您的表单处于模式中，那么看起来关闭模式的单击处理程序正在销毁/卸载表单，然后才能提交。更新按钮以删除点击处理程序。close如果要在提交后关闭模式，可以将模式移动到事件处理程序的主体中：

模板：

<form name="newProduct" id="newProduct" (ngSubmit)="saveNewProduct()" [formGroup]="newProduct">
  <label for="productId">Id</label><br />
  <input name="productId" id="productId" type="number" formControlName="productId" placeholder="productId" autocomplete="off" />
   <m-spinner-button [options]="spinner" type="submit">ADD PRODUCT</m-spinner-button>
</form>

控制器：

saveNewProduct() {
  // ... your existing code
  this.modal.close(); // close the modal when everything else is done
}

希望这会有所帮助！

推荐阅读