Angular 6：组件内的表单，单击提交按钮时未触发ngSubmit答案

【问题标题】：Angular 6: Form inside a component, ngSubmit not triggered when clicking on submit buttonAngular 6：组件内的表单，单击提交按钮时未触发ngSubmit
【发布时间】：2018-11-01 08:52:31
【问题描述】：

我有一个共享组件，在组件内部，我创建了一个响应式表单、一堆表单字段和两个按钮。

<form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()">
  <div class="form-content">
    <div class="form-item" *ngFor="let field of fieldTypes">
      <div class="field-label">
        <label>{{ field.label }}:</label>
      </div>
      <div class="input-field">
        <input [type]="field.type" [formControlName]="field.name" [readonly]="field.readonly" [ngClass]="{'readonly': field.readonly}">
      </div>
      <span *ngIf="field.mandatory">*</span>
    </div>
  </div>
  <div class="form-button-group">
    <button type="submit" [disabled]="!formGroup.valid">Save</button>
    <button type="reset">Cancel</button>
  </div>
</form>

当我在页面中使用共享组件并单击提交按钮时，没有任何反应。 ngSubmit 事件永远不会被触发。我将不得不在按钮上添加（单击）以强制调用该方法。

<button type="submit" [disabled]="!formGroup.valid" (click)="onFormSubmit()">Save</button>

有什么想法吗？任何帮助将不胜感激！

【问题讨论】：

控制台是否出现任何错误？
@LucianMoldovan 不，控制台很干净。什么都没发生……很奇怪。

标签： angular forms submit angular6

【解决方案1】：

问题与上述代码无关。可能是，您在 DOM 中有任何其他形式。这是完美运行的代码的 stackblitz 版本。

https://stackblitz.com/edit/angular-qyj4uq

【讨论】：

【解决方案2】：

我认为您的表单无效，这就是它没有被提交的原因。替换您验证表单的方式：

<form [formGroup]="formGroup" (ngSubmit)="onFormSubmit()" #myForm="ngForm">
  <div class="form-content">
    ....
  </div>
  <div class="form-button-group">
    <button type="submit" [disabled]="!myForm.form.valid">Save</button>
    ....
  </div>
</form>

在您的组件中检查 myForm.form.errors 的值 - 这应该会给您一个提示。

【讨论】：