Angular refresh page after disable DOM field form - forms

I click Buy radio button, images upload field will be removed, but when i click submit, the page refresh. It works normally when I don't affect DOM
Please, explain me what happened ?
Here is my code
onSubmitPost() {
this.progress = true;
const fileList: FileList = this.event.target.files;
if (fileList.length > 0) {
const fileListLength = fileList.length;
const formData: FormData = new FormData();
formData.append('title', this.title);
formData.append('telephone', this.telephone);
formData.append('description', this.description);
formData.append('city', this.city);
if (this.isSell === true) {
for (let x = 0; x < fileListLength; x++) {
formData.append('thumbnail', fileList[x]);
}
}
const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Authorization', 'clientId 7702919f7e72965');
this.http
.post('http://localhost:3000/api/post', formData, {
headers: headers
})
.map(res => res.json())
.subscribe(
data => {
this.Notificationervice.success('Success');
this.progress = false;
},
error => this.Notificationervice.error('Something wrong')
);
}
}
}
HTML Code
<div id="new-post" class="modal" materialize="modal">
<div class="modal-content">
<div class="row">
<form class="col s12" (submit)="onSubmitPost()" enctype="multipart/form-data">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">web</i>
<input id="icon_prefix" type="text" class="validate" name="title" [(ngModel)]="title">
<label for="icon_prefix">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate" name="telephone" [(ngModel)]="telephone">
<label for="icon_telephone">Telephone</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea" [(ngModel)]="description" name="description"></textarea>
<label for="icon_prefix2">Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">location_on</i>
<input type="text" id="autocomplete-input" class="autocomplete" materialize="autocomplete" [materializeParams]="[{'data': {'houston': null, 'Cali': null}}]"
[(ngModel)]="city" name="city">
<label for="autocomplete-input">City</label>
</div>
</div>
<div class="row">
<div class="col s6">
<p>
<input name="isSell" type="radio" id="buy" (change)="isSell = !isSell" [checked]="!isSell" />
<label for="buy">Buy</label>
</p>
</div>
<div class="col s6">
<p>
<input name="isSell" type="radio" id="sell" (change)="isSell = !isSell" [checked]="isSell" />
<label for="sell">Sell</label>
</p>
</div>
</div>
<div class="file-field input-field" *ngIf="isSell">
<div class="btn">
<span>Images</span>
<input type="file" multiple accept='image/*' name="post" (change)="onChange($event)">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
<div class="modal-footer">
<input type="submit" class="modal-action modal-close waves-effect waves-green btn-flat" value="Submit">
</div>
</form>
</div>
</div>
</div>

Related

VueJS form item json post

I have a form and when the "new iban" button is clicked in this form, he can add as many "iban" inputs as he wants.
in the same way, when the "add item" button is clicked, as many entries can be added and "SPINNET" can be seen. But when I post them, the input values ​​return empty. I want it to be sent in "iban" and "authoritative" json format.
new Vue({
el: "#app",
data() {
return {
data: {
name: "",
iban: "",
yetkili: "",
},
sections: [{
ibans: [{
item: ""
}]
}],
yetkisection: [{
yetkililer: [{
yetkiliadi: "",
yetkilieposta: "",
yetkilitelefon: "",
yetkilinotu: "",
}]
}],
}
},
methods: {
addNewItem(id) {
this.sections[id].ibans.push({
item: ''
});
},
removeItem(sectionIndex, ibanIndex) {
this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
},
addNewYetkili(id) {
this.yetkisection[id].yetkililer.push({
yetkiliadi: ''
});
},
removeYetkili(sectionIndex, ibanIndex) {
this.yetkisection[sectionIndex].yetkililer.splice(ibanIndex, 1);
},
async addTag() {
const res = await this.callApi('post', 'app/create_musteri', this.data)
if (res.status === 200) {
console.log(res)
} else {
console.log("error");
}
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="container">
<div class="col-12">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label"><span><i data-feather='file-text'></i></span>NAME</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="data.name">
</div>
</div>
</div>
<div class="col-12 sections" v-for="(section, sectionIndex) in sections">
<div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
<div class="col-sm-3">
<label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Item" v-model="iban.item">
<span v-if="section.ibans.length>1"
class="float-right" style="cursor:pointer" #click="removeItem(sectionIndex, ibanIndex)">X</span>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem(sectionIndex)">New Iban</button>
</div>
<div>
<div>
<table class="fatura-table">
<colgroup>
<col style="width: 25%;;">
<col style="width: 25%;;">
<col style="width: 25%;;">
<col style="width: ;">
<col style="width: 70px;">
</colgroup>
<thead>
<tr>
<th>YETKİLİ KİŞİNİN ADI</th>
<th>E-POSTA</th>
<th>TELEFON</th>
<th>NOTLAR</th>
<th></th>
</tr>
</thead>
</table>
</div>
<section v-for="(section, sectionIndex) in yetkisection">
<div class="card-body" v-for="(yetkili, ibanIndex) in section.yetkililer">
<div class="row">
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkiliadi" placeholder=" "/>
<label>YETKİLİ KİŞİNİN ADI</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilieposta" placeholder=" "/>
<label>E-POSTA</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilitelefon" placeholder=" "/>
<label>TELEFON</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input type="text" class="form-control" v-model="yetkili.yetkilinotu" placeholder=" "/>
<label>NOTLAR</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button class="btn btn-icon btn-secondary waves-effect waves-float waves-light" #click="removeYetkili(sectionIndex, ibanIndex)">
<i data-feather='x'>DELETE</i>
</button>
</div>
</div>
</div>
<div class="mt-1">
<div class="col-12 px-0">
<button type="button" class="btn btn-primary btn-sm btn-add-new" data-repeater-create #click="addNewYetkili(sectionIndex)">
<i data-feather="plus" class="me-25"></i>
<span class="align-middle">Add Item</span>
</button>
</div>
</div>
</section>
</div>
<button #click="addTag" class="btn btn-dark data-submit">SAVE</button>
</div>
</template>
</div>
Edited my answer to handle your new build and structure.
Showing both the approaches below:
new Vue({
el: "#app",
data() {
return {
data: {
name: "",
iban: "",
yetkili: ""
},
sections: [{ item: "" }],
yetkisections: [
{
yetkiliadi: "",
yetkilieposta: "",
yetkilitelefon: "",
yetkilinotu: ""
}
]
};
},
methods: {
addNewItem() {
this.sections.push({ item: "" });
},
removeItem(sectionIndex) {
this.sections.splice(sectionIndex, 1);
},
addNewYetkili() {
this.yetkisections.push({ yetkiliadi: "" });
},
removeYetkili(yetkisectionIndex) {
this.yetkisections.splice(yetkisectionIndex, 1);
},
async addTag() {
/* const res = await this.callApi('post', 'app/create_musteri', this.formData)
if (res.status === 200) {
console.log(res)}
else {
console.log("error");
} */
console.log(this.$data);
console.log(this.formData);
}
},
computed: {
formData() {
return {
data: {
...this.data,
sections: this.sections,
yetkisection: this.yetkisections
}
};
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<div class="container">
<div class="col-12">
<div class="mb-1 row">
<div class="col-sm-3">
<label class="col-form-label"
><span><i data-feather="file-text"></i></span>NAME</label
>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Item"
v-model="data.name"
/>
</div>
</div>
</div>
<div
class="col-12 sections"
v-for="(section, sectionIndex) in sections"
:key="sectionIndex"
>
<div class="col-sm-3">
<label class="col-form-label" for="iban"
><span><i data-feather="file-text"></i></span>IBAN NUMBER</label
>
</div>
<div class="col-sm-6">
<input
type="text"
class="form-control"
placeholder="Item"
v-model="section.item"
/>
<span
v-if="sections.length > 1"
class="float-right"
style="cursor: pointer"
#click="removeItem(sectionIndex)"
>X</span
>
</div>
</div>
<button class="btn btn-success mt-5 mb-5" #click="addNewItem()">
New Iban
</button>
<div>
<div>
<table class="fatura-table">
<colgroup>
<col style="width: 25%;;" />
<col style="width: 25%;;" />
<col style="width: 25%;;" />
<col style="width: ;" />
<col style="width: 70px;" />
</colgroup>
<thead>
<tr>
<th>YETKİLİ KİŞİNİN ADI</th>
<th>E-POSTA</th>
<th>TELEFON</th>
<th>NOTLAR</th>
<th></th>
</tr>
</thead>
</table>
</div>
<section>
<div
class="card-body"
v-for="(yetkili, yetkisectionIndex) in yetkisections"
:key="yetkisectionIndex"
>
<div class="row">
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkiliadi"
placeholder=" "
/>
<label>YETKİLİ KİŞİNİN ADI</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilieposta"
placeholder=" "
/>
<label>E-POSTA</label>
</div>
</div>
<div class="col-sm-2 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilitelefon"
placeholder=" "
/>
<label>TELEFON</label>
</div>
</div>
<div class="col-sm-3 col-12 mb-1 mb-sm-0 hizmet">
<div class="form-floating">
<input
type="text"
class="form-control"
v-model="yetkili.yetkilinotu"
placeholder=" "
/>
<label>NOTLAR</label>
</div>
</div>
<div class="col-sm-1 col-12 mb-1 mb-sm-0">
<button
class="btn btn-icon btn-secondary waves-effect waves-float waves-light"
#click="removeYetkili(yetkisectionIndex)"
>
<i data-feather="x">DELETE</i>
</button>
</div>
</div>
</div>
<div class="mt-1">
<div class="col-12 px-0">
<button
type="button"
class="btn btn-primary btn-sm btn-add-new"
data-repeater-create
#click="addNewYetkili()"
>
<i data-feather="plus" class="me-25"></i>
<span class="align-middle">Add Item</span>
</button>
</div>
</div>
</section>
</div>
<button #click="addTag" class="btn btn-dark data-submit">SAVE</button>
</div>
</template>
</div>

Error setting form array only brings first value

I can't find the problem to set value in my form. It's only brings me the first value and the mistake is ERROR Error: Cannot find form control at index 1
at FormArray._throwIfControlMissing. Does anyone know what the right way would be like?
in my components
public setValueForm(): void {
const values = {
'_id': this.priceList._id,
'name': this.priceList.name,
'percentage' : this.priceList.percentage,
'allowSpecialRules' : this.priceList.allowSpecialRules,
'rules' : this.priceList.rules || []
};
this.priceListForm.setValue(values);
}
and my html
<div class="row tab-content">
<div formArrayName="rules" *ngFor="let rule of priceListForm.get('rules').controls; let i = index;">
<div [formGroupName]="i">
<div class="row">
<div class="form-group col-md-4">
<label for="category" class="control-label">Rubro:</label>
<select class="form-control" formControlName="category">
<option *ngFor="let category of categories"
[value]="category._id"
[disabled]="readonly">
{{category.description}}
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="make" class="control-label">Marca</label>
<select class="form-control" formControlName="make">
<option *ngFor="let make of makes"
[value]="make._id"
[disabled]="readonly">
{{make.description}}</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="percentage" class="control-label">Porcentaje:</label>
<div class="input-group">
<input type="number" class="form-control" formControlName="percentage" name="percentage" id="percentage" [readonly]="readonly"/>
</div>
<div *ngIf="formErrors.percentage" class="alert alert-danger">
{{ formErrors.percentage }}
</div>
</div>
<div class="col-md-1">
<label class="control-label">Acción:</label>
<button type="button" class="btn btn-success btn-sm" (click)="addRule()">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-danger btn-sm" (click)="deleteRule(i)">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
</div>
</div>
</div>
Resolved
let control = <FormArray>this.priceListForm.controls.rules;
this.priceList.rules.forEach(x => {
control.push(this._fb.group({
'_id': x._id,
'percentage': x.percentage,
'make' : x.make,
'category' : x.category
}))
})

Bootstrap 4 DatePicke issue

I am using bootstrap 4, jQuery 3.3.1 and datepicker (http://www.eyecon.ro/bootstrap-datepicker/)
I have three issues:
The Calendar icon is not the size of the input box
When submit without selecting the date, bootstrap validation message not working.
Auto close is not working.
$(document).ready(function()
{
$('#depositeDate').datepicker({
"setDate": new Date(),
"autoclose": true
});
})
<div class="form-group row">
<label for="depositeDate" class="col-sm-4 col-form-label col-form-label-lg">Deposit Date</label>
<div class="col-sm-2 input-group date">
<input type="text" class=" text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon">
<i class="fas fa-calendar-alt fa-3x" style="color:RED"></i> </div>
<div class="invalid-feedback">
Please enter a valid Order Number.
</div>
</div>
</div>
The Calendar icon is not the size of the input box
The markup for input group addon is changed in Bootstrap 4.0 stable
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">#example.com</span>
</div>
</div>
Your code should be
<div class="input-group date" >
<input type="text" class="form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><span class="fa fa-calendar"></span></span>
</div>
</div>
3.Auto close is not working.
I don't see setting like "autoclose": true , we should explicitly call to close the datepicker.
.on('changeDate', function(ev) {
checkout.hide();
})
<div class="form-group row justify-content-center align-items-center">
<label for="depositeDate" class="col-sm-3 col-form-label">Deposit Date</label>
<div class="col-sm-3 input-group date" >
<input type="text" class="text-input form-control" id ="depositeDate" placeholder="MM/DD/YYYY">
<div class="input-group-addon" style="cursor: pointer;" onclick="$('#depositeDate').focus();">
<i class="fas fa-calendar-alt fa-2x"></i>
</div>
</div>
</div>
this code will do:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<br>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<label for="Order number">Order number</label>
<input type="text" id="Order number" >
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<label for="male">Deposit Date</label>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script>$(function() {
$('#datetimepicker1').datetimepicker();
});</script>
check out the fiddle:https://jsfiddle.net/rqy7L2do/

entire textbox isn't highlighted in asp.net mvc form

Login form
This is the code for the login form. From the picture it can be seen that the entire textbox isn't highlighted. What am I missing?
<div class="login">
<div class="login-form">
#using (Html.BeginForm("Login", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h2 style="margin-left:-15px">Login</h2>
<div id="maintenance"></div>
<div class="bg-danger text-danger FailureCont">
</div>
<div class="form-group">
<span id="BodyContent_LoginCtrl_UserNameRequired" title="Username is required." class="bg-danger text-danger block" style="visibility:hidden">Username is required.</span>
<div class="input-group login-group">
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
<div>#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", placeholder = "Email", aria_required = true })</div>
#*#Html.ValidationMessageFor(m => m.UserName, "", new { #class = "text-danger" })*#
#* <input name="ctl00$BodyContent$LoginCtrl$UserName" type="text" id="BodyContent_LoginCtrl_UserName" tabindex="1" class="form-control" placeholder="Username" autocomplete="off" disabled="disabled" data-validate="placeholder required" />*#
</div>
</div>
<div class="form-group">
<span id="BodyContent_LoginCtrl_PasswordRequired" title="Password is required." class="bg-danger text-danger block" style="visibility:hidden;">Password is required.</span>
<div class="input-group login-group">
<span class="input-group-addon">
<i class="fa fa-lock"></i>
</span>
#*<input name="ctl00$BodyContent$LoginCtrl$Password" type="password" id="BodyContent_LoginCtrl_Password" tabindex="2" class="form-control" placeholder="Password" autocomplete="off" disabled="disabled" data-validate="placeholder required" />*#
#Html.PasswordFor(m => m.Password, new { #class = "form-control", placeholder = "Password" })
</div>
</div>
<div class="form-group">
<div class="col-sm-6 small-side-padding">
<button type="button" class="btn btn-secondary btn-block" id="" onclick="location.href='#Url.Action("Register","Account")'">Register</button>
</div>
<div class="col-sm-6 small-side-padding">
<input type="submit" class="btn btn-primary btn-block" id="bSummit" value="Login" />
#*<input type="submit" name="ctl00$BodyContent$LoginCtrl$LoadingLoginButton" value="Login" id="BodyContent_LoginCtrl_LoadingLoginButton" class="btn btn-primary btn-block hidden"/>*#
</div>
</div>
#*<input type="submit" name="ctl00$BodyContent$LoginCtrl$LoginButton" value="Login" class="btn btn-primary btn-block" />*#
<div class="form-group text-center forgottenCont">
Need help with your <a class="forgottenpwd" href="/Account/ForgotPassword.cshtml">username</a> or <a class="forgottenpwd" href="#Url.Action("ForgotPassword","Account")">password</a>?
</div>
}
</div>
<div class="text-center login-icons hidden-ph">
<i class="fa fa-2x fa-twitter"></i>
<i class="fa fa-2x fa-linkedin"></i>
<i class="fa fa-2x fa-facebook"></i>
</div>
</div>
I'm not sure why the entire textbox isn't highlighted. Can someone please tell me where I'm going wrong. Thank you.
.login-group {
background: #fff;
border: 1px solid #ccc;}
.login-group .form-control {
border: 0;}
#Nimmi: Not sure if any style is overridden here, but thanks :)

Form not submitting after form validation

I have a form in a modal window :
<div class="modal fade bs-example-modal-lg" id="vp" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form id="create_job" method="post" action="?create">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Job number - Jxxxx" name="job_number">
</div>
<div class="col-md-4">
<input type="text" class="form-control" placeholder="Part number - xxxxxx" name="part_number">
</div>
<div class="col-md-2"><p class="form-control-static text-right"><b>Cable length (m):</b></p></div>
<div class="col-md-2">
<input type="text" class="form-control" placeholder="Cable" value="06" name="cable">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="submitButton" class="btn btn-primary">Submit</button></form>
</div>
</div>
</div>
</div>
This is the validation js:
$(document).ready(function() {
$('#create_vpf_job').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
job_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
part_number: {
validators: {
notEmpty: {
message: ' '
}
}
},
cable: {
validators: {
notEmpty: {
message: ' '
}
}
}
}
});
});
I've look online for same problems but I haven't found a solution. The submit button doesn't submit. I'm using formvalidation.io for validation and nothing from their docs helped me.
Also tried adding with no luck
$('#create_job').submit();
Your HTML is bad formatted, and the form is closing after the container div closes, so the submit button doesn't know what to submit. Change it to:
<div id="vp" class="modal fade bs-example-modal-lg">
<div role="document" class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="myModalLabel" class="modal-title">Create Job</h4>
</div>
<div class="modal-body container-fluid">
<form action="?create" method="post" id="create_job">
<div class="form-group">
<div class="row">
<div class="col-md-4">
<input type="text" name="job_number" placeholder="Job number - Jxxxx" class="form-control" />
</div>
<div class="col-md-4">
<input type="text" name="part_number" placeholder="Part number - xxxxxx" class="form-control" />
</div>
<div class="col-md-2">
<p class="form-control-static text-right">
<b>Cable length (m):</b>
</p>
</div>
<div class="col-md-2">
<input type="text" name="cable" value="06" placeholder="Cable" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-primary" name="submitButton" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
And it will work. On this plunkr you can check that it's giving a bad-request response, which is good news, because it means the request is being done, and so, the form is being submitted once the correction made