Угловой 6: форма внутри компонента, ngSubmit не запускается при нажатии на кнопку отправки

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

Я думаю, что ваша форма недействительна, и поэтому она не отправляется. Замените способ проверки формы:

<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 - это должно дать вам подсказку.

Answer 2

Проблема не связана с приведенным выше кодом. Возможно, у вас есть любая другая форма в DOM. Вот версия вашего кода, которая отлично работает.

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