ngSubmit not working
26,203
Solution 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.
Solution 2
I was having the same issue because I was not using a <form>
tag to wrap my form.
Solution 3
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>
Solution 4
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>
![SmartestVEGA](https://i.stack.imgur.com/Zy8dK.jpg?s=256&g=1)
Author by
SmartestVEGA
Updated on July 30, 2022Comments
-
SmartestVEGA almost 2 years
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?
-
James Poulose over 5 yearsThat's 30 minutes i am not going to get back - thanks!!
-
Nimish David Mathew over 4 yearsI had
button type="button"
instead ofbutton type="submit"
.