Question

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

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

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

Answer 1

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

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

Answer 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的值-这应该给您一个提示。

角度6：组件内的表单，单击“提交”按钮时未触发ngSubmit

2 个答案: