ng提交不起作用

Question

我有一个 Angular 4 表单，我正在尝试提交数据

HTML 代码

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

按钮代码

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

    </div>

Scheduler.TS 文件

import { Component, OnInit } from '@angular/core';
import { Scheduler } from 'rxjs/Scheduler';
/* Import FormControl first */
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-scheduler',
  templateUrl: './scheduler.component.html',
  styleUrls: ['./scheduler.component.css']
})
export class SchedulerComponent implements OnInit {

  //Gender list for the select control element
 private scheduleTypeList: string[];
 //Property for the user
 private scheduler:Scheduler;

 private signupForm: FormGroup;

 constructor(private fb:FormBuilder) { } 

  ngOnInit() {   

    this.scheduleTypeList =  ['Type 1', 'Type 2', 'Type 3'];
    this.signupForm  = this.fb.group({
      schedulejob:  ['', Validators.required] ,               
      frequency: ['', Validators.required],
      days: ['', Validators.required],
      zone: ['', Validators.required],
      schedulerjobtype:['', Validators.required]
  })  
  } 
  public onFormSubmit() {
    this.scheduler = this.signupForm.value;
    if(this.signupForm.valid) {
        this.scheduler = this.signupForm.value;
        console.log(this.scheduler);
      // alert(this.scheduler);
        /* Any API call logic via services goes here */
    }
    //alert(this.scheduler);
    console.log(this.scheduler);
}
}

为什么在提交点击和警报时执行没有传递到 onFormSubmit 或 console.log 不打印值？

Answer 1

就像我在评论中所说，如果您的按钮不在表单内，它将不会提交。

所以改为：

<form>
  ...
  <button type="submit">Submit</button>
</form>

但是，如果您做得有点不同，则可以将其放在外面，如本问题中所述。

Answer 2

我遇到了同样的问题，因为我没有使用

<form>

 标签来包装我的表单。 

Answer 3

您可以做的一个小技巧是在表单内放置一个辅助隐藏按钮，并让主按钮以编程方式单击辅助按钮：

<form [formGroup]="form" (ngSubmit)="submit()">
  ...
  <button type="submit" hidden #btn></button>
</form>
...
<button (click)="btn.click()">Submit</button>

Answer 4

您需要将按钮代码放入表单中，如下所示

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

  <!-- Button Code Here -->

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

  </div>
   <!--  Form ends here -->
 </form>

Answer 5

您还可以在提交按钮中使用表单属性。该属性使用表单的 id 来引用它：

<form id="formID">
      ...
      <button type="submit" form="formID">Submit</button>
</form>

Answer 6

我遇到了同样的问题。经过一番努力后，我意识到我在按钮的单击方法中调用了

event.stopProgogation()

 和 

event.preventDefault()

 。当用户单击按钮时，这些方法调用会阻止表单提交。我的问题的解决方案只是删除这些方法调用。

Answer 7

当这件事发生在我身上时，我确实检查了所有可能的方法。最后我发现解决方案是我没有在 app.module 文件中包含 FormsModule 。