Angular 6：表单提交因表单未连接而取消答案

【问题标题】：Angular 6: Form submission canceled because the form is not connectedAngular 6：表单提交因表单未连接而取消
【发布时间】：2021-06-08 02:18:27
【问题描述】：

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

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

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

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

【问题讨论】：

如果您从按钮中删除点击处理程序并确保它的类型为提交，您会收到相同的错误吗？
@AlexanderStaroselsky 是的，现在可以使用了，谢谢！

标签： angular angular-forms

【解决方案1】：

如果您的表单处于模式中，则看起来关闭模式的单击处理程序正在销毁/卸载表单，然后才能提交。更新按钮以删除点击处理程序。如果您想在提交后关闭模态，可以将模态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
}

希望对您有所帮助！

【讨论】：