CODEWITHSUNDEEP
htmlangularangularjs-directiveangular4-forms
SmartestVEGA
SmartestVEGA

Reputation: 8899

ngSubmit not working

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?

Upvotes: 19

Views: 40691

Answers (7)

Alwin K
Alwin K

Reputation: 41

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.

Upvotes: 4

Taha K&#246;rkem
Taha K&#246;rkem

Reputation: 906

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.

Upvotes: 0

etnomiu123
etnomiu123

Reputation: 1

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>

Upvotes: 0

Mauro Aguilar
Mauro Aguilar

Reputation: 1338

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>

Upvotes: 2

Leo
Leo

Reputation: 731

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

Upvotes: 4

Chrillewoodz
Chrillewoodz

Reputation: 28368

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.

Upvotes: 55

Hashim Sheikh
Hashim Sheikh

Reputation: 91

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>

Upvotes: 3

Related Questions