ngSubmit not working

Question

I have an angular 4 form where I am trying to submit data

HTML Code

<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

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

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);
}
}

Why is the execution not passed to onFormSubmit on submit click and alert or console.log not printing values?

Melchizedek

Is your button inside the form? – Geoid

Can you share the module.ts which declares SchedulerComponent? – Hum

thanks @chrilewoodz thats the issue, please post as answer i will accept it – Melchizedek

@Geoid please post it as answer i will accept it – Melchizedek

Answer 1

Like I said in the comment, if your button is not inside your form it will not submit it.

So change to:

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

It is possible however to have it outside if you do it a bit differently, as described in this question.

Geoid

That's 30 minutes i am not going to get back - thanks!! – Kennith

I had button type="button" instead of button type="submit". – Panto

Place the button inside the form as above AND button type must be submit. – Bizet

Answer 2

I was having the same issue because I was not using a <form> tag to wrap my form.

Taal

Answer 3

you need to put the button code inside the form like below

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

Rorry

Answer 4

When it happened to me, I checked literally all the ways possible . Then finally I found the solution is that I did not include the FormsModule in app.module file.

Commentary

Answer 5

a small trick you can do is to place an auxiliary hidden button inside the form and let the main button programmatically click the auxiliary button:

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

Saddlery

The solution in the link of @Geoid answer is much better. Use the form attribute of the button. – Cleave

Sure, but beware that the form attribute is not supported by IE. – Saddlery

Answer 6

You can also use the form attribute in the submit button. This attribute uses the form's id to refer to it:

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

Hunley

Answer 7

I was encoutering same issue. After struggling a lot, I realized that I have called event.stopProgogation() and event.preventDefault() in my button's click method. These method calls was preventing form submission when user clicked the button. Solution of my issue was only removal of these method calls.

Joacima