Angular 4表单ngSubmit失效：点击提交未触发onFormSubmit

咱们一步步排查问题，先聚焦最可能导致提交事件完全失效的核心原因：

1. HTML表单结构不完整（标签未闭合） #

你提供的HTML代码里，<form>、<fieldset>以及包裹输入框的<div class="form-group">都没有闭合标签。浏览器对不完整的HTML结构解析会出现异常，Angular自然无法正确绑定(ngSubmit)事件，导致点击提交按钮时根本不会调用onFormSubmit()方法。

修复方式：补全所有未闭合的标签，完整的HTML结构参考如下：

<form class="form-horizontal" [formGroup]="signupForm" (ngSubmit)="onFormSubmit()">
  <fieldset>
    <legend>Scheduler</legend>
    <!-- Schedule Job Block -->
    <div class="form-group">
      <label for="scheduleJob">Schedule Job</label>
      <input type="text" formControlName="schedulejob" id="scheduleJob" placeholder="Schedule Job">
    </div>

    <!-- 补上其他必填控件的HTML元素 -->
    <div class="form-group">
      <label for="frequency">Frequency</label>
      <input type="text" formControlName="frequency" id="frequency" placeholder="Frequency">
    </div>

    <div class="form-group">
      <label for="days">Days</label>
      <input type="text" formControlName="days" id="days" placeholder="Days">
    </div>

    <div class="form-group">
      <label for="zone">Zone</label>
      <input type="text" formControlName="zone" id="zone" placeholder="Zone">
    </div>

    <div class="form-group">
      <label for="schedulerjobtype">Job Type</label>
      <select formControlName="schedulerjobtype" id="schedulerjobtype">
        <option *ngFor="let type of scheduleTypeList" [value]="type">{{type}}</option>
      </select>
    </div>

    <div class="form-group">
      <button type="reset" class="btn btn-default">Cancel</button>
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </fieldset>
</form>

2. 错误导入RxJS的Scheduler类型 #

你在TS文件里导入的import { Scheduler } from 'rxjs/Scheduler';是RxJS的调度器类，而你定义的private scheduler:Scheduler;是用来存储表单数据的自定义模型，这会导致类型不匹配问题。建议创建自己的Scheduler接口：

// 在组件文件顶部自定义接口
interface Scheduler {
  schedulejob: string;
  frequency: string;
  days: string;
  zone: string;
  schedulerjobtype: string;
}

// 删除RxJS的Scheduler导入语句
// import { Scheduler } from 'rxjs/Scheduler';

3. 表单缺少必填控件的HTML元素 #

你的FormGroup里定义了5个必填控件，但HTML中只实现了schedulejob的输入框，其他frequency、days、zone、schedulerjobtype都没有对应的表单元素。这会导致this.signupForm.valid始终为false，即使提交方法触发了，if代码块内的逻辑也不会执行，所以必须补上这些控件的HTML（参考上面完整HTML示例）。

验证修复效果 #

完成上述修复后，点击提交按钮应该会正常触发onFormSubmit()方法：

• 当所有必填项都填写完整时，控制台会输出表单数据（进入if代码块）；
• 若未填全必填项，控制台仍会输出表单数据，但不会执行if块内的逻辑。

内容的提问来源于stack exchange，提问作者SmartestVEGA