(ngSubmit) is called when press (click) button
AngularTypescriptAngular Problem Overview
I have two buttons on my Angular2 Form Component. The button are doing their own functionalities.
- Button Submit : Which is submit all the values to the API.
- Button Add. : Which is push an object to an array.
The two methods are here...
onSubmit() {
this.submitted = true;
this.model.service_requests = this.modelJobServices;
this.onCreateJob();
}
addJobService(modelJobService :Jobservice){
let modelJobServiceLocal = new Jobservice(modelJobService.service_id,modelJobService.service_note,modelJobService.status)
this.modelJobServices.push(modelJobServiceLocal);
}
My Component.html structure is as below
<form #jobRegistrationForm="ngForm" (ngSubmit)="onSubmit()">
......
......
......
<button class="flat btn-primary form-control" id="btn_add" (click)="addJobService(modelJobService)"> ADD SERVICE </button>
....
....
....
<button (submit)="onSubmit()" [disabled]="!jobRegistrationForm.form.valid" class="flat form-control col-md-4 btn-primary">{{BUTTON_TEXT}}</button>
when I press the (click)
button the form is submitted to the API call. But I did not call the onSubmit()
on the (click)
button event
Angular Solutions
Solution 1 - Angular
Buttons inside a form become a type="submit"
by default.
Make them plain buttons explicitly:
<button type="button"
Solution 2 - Angular
As per W3 spec the default value for attribute type inside button is submit.
ie <button> == <button type="submit">
If you dont want the ngSubmit event to get triggered set the attribute type to button.
<button type="button">
Or use $event.preventDefault().
<button (click)="addJobService(modelJobService); $event.preventDefault()"
Solution 3 - Angular
inside form when (ngSubmit) is placed it always waits for 2 things.
- Is the Form is valid? it checks whether all the required input is filled.
- waits for any event to trigger the (ngsubmit) like button click(in which type is not mentioned or type is mentioned as submit) or enter in any input field.
Solution 4 - Angular
In html
<form #myForm="ngForm">
</form>
<button (click)="send()"></button>
In Controller
> @ViewChild('myForm') ngForm: NgForm; > > send() { this.ngForm.ngSubmit.emit(); }