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

Question

I have a shared component and inside the component, I have created a reactive form, a bunch of form fields and two buttons.

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

When I use the shared component in a page and click submit button, nothing happens. The ngSubmit event is never triggered. I will have to add (click) on the button to force calling the method.

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

Any ideas? Any help will be appreciated!

Answer 1

Issue is not related to the above code. Might be, you have any other form in the DOM. Here is the stackblitz version of your code that works perfectly.

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

Answer 2

I think your form is not valid and that's why it's not being submitted. Replace the way you're validating your form:

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

In your component check the value of myForm.form.errors - That should give you a hint.