Develop Reference

Vue.js Data not being sent with HTML form submit

So I have a form with some vue.js data like
<div class="form-group">
<label class="form-label" for="field_description">Ontology Version</label>
<input type="text" name="ontology-version" class="form-control" disabled :value="ontology">
</div>
When I submit the form by clicking the submit button, there's no data for the ontology-version in the POST request.
I have a submit button like this <button type="submit" class="btn btn-primary ml-auto">Save</button>
Also, When I inspect the element on chrome, I see that no value is set

As said in comments and previous answer if you submit disabled input field .It wont be sent when request is made so pass it as readonly if you are intend to send this value.
<div class="form-group">
<label class="form-label" for="field_description">Ontology Version</label>
<input type="text" name="ontology-version" class="form-control" readonly :value="ontology">
</div>

Disabled input fields are not sent when the request is made.
This is by design, so you can filter fields out.

How to put form validation in angularjs

I have form like below,
<div ng-if="vm.settingsObj.others.name === 'Course Specialization'">
<div class="form-group">
<div class="col-xs-12" ng-repeat="specialization in vm.settingsObj.course_specialization">
<div class="row">
<div class="form-group col-sm-8" >
<input name="course_specialization{{$index}}" class="form-control" placeholder="Course Specialization" ng-model="specialization.value" >
</div>
<div class="form-group col-sm-4">
<button ng-click="vm.removeStatus('course_specialization',$index)" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-blue" ng-click="vm.addStatus('course_specialization')" >ADD</button>
</div>
</div>
Here i am incrementing the input field when i click on 'Add' button but when i leave input fields as empty and click on save it is getting saved.So what i need is form validation when my field is empty.Can anyone please help me.Thanks.

You have to wrap all inputs in a single form tag so that you can use angular form validation. Angular provides a well set of validations using classes and form controller and you should go for that. For more information you can find a reference from below links:
link one
or for a overview you can follow
link two

Accesing $pristine property of input without form in Angular?

Say I have the following HTML...
<div class="row">
<div class="col-xs-3 align-right">
<p>Email</p>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" ng-model="registrationForm.email.value"/>
<span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
</div>
</div>
This bit of HTML creates an email field, with an error label that is shown if the email provided is invalid. This works perfectly, and is not part of my question.
I would like to slightly alter the behavior of this label. When the user first visits the form, I don't want to display the error label unless the user has changed the value of the form input.
It seems like the $pristine and $dirty properties are the key, but I'm confused on how to go about using them. If I try to access them of properties of email.value (I.E. registrationForm.email.value.$pristine) the property seems to be undefined.
I would like to avoid enclosing these inputs in an HTML form. Is there still a way I can retain use of these properties, and if so, how?

When you create your <form> element, it will create a $scope variable with the name of your form. For example:
<form name="regForm">
<div class="row">
<div class="col-xs-3 align-right">
<p>Email</p>
</div>
<div class="col-xs-7">
<input type="text" class="form-control" name="email" ng-model="registrationForm.email.value"/>
<span class="error-label" ng-hide="registrationForm.email.valid"><span class="glyphicon glyphicon-remove"></span>Must be a valid email!</span>
</div>
</div>
</form>
You can access the $pristine using $scope.regForm.email.$pristine.
Without a <form>, simply use ng-form, which will give you the functionality of the form, without needing an actual <form> element. See this post for more information.

Form is always invalid in AngularJS

It seems very trivial, so I'm sorry if I just missed something, but I can't figure it out.
I want to enable my button which sends data using AJAX when form is valid, but the button is always disabled.
Have a look:
<form name="UserReg" novalidate>
<div class="form-group">
<input type="text" name="user_name"
data-ng-model="UserName"
ng-maxlength=20
placeholder="Name"
required />
<div data-ng-messages="UserReg.user_name.$error"
data-ng-show="UserReg.user_name.$touched">
<div data-ng-messages-include="angular_app/validation/form_messages.html"></div>
</div>
</div>
<div class="form-group" style="padding-top:20px;">
<button type="button" name="add_user"
class="top-menu-button"
data-ng-click="AddUser()"
ng-disabled="UserReg.$invalid">
<i class="fa fa-plus fa-lg padding-r-5"></i> Add User
</button>
</div>
</form>
Where is the problem?

First you should enclose the value of ng-maxlength in double quotes.
Second, Since you have required attribute on the input field, The form will become valid only if the input field has some value (type something in it & the form will become valid).
Otherwise if not necessary remove the required attribute from the input field.

html form trying to http get when a button is pressed

Ive got a html form with a few select lists and a text box in it. I also have a submit button which is outside of the form. The reason for this is I want to construct the parameters myself, as I dont want the content of all of the select lists. The problem I am having is, that when I press my submit button,The form automaticly trys to redirect to the same page, but with a ? at the end with all the contents of the form. I am also having problems where window.location.href is not working inside the submit() javascript method, but I am not sure if this is caused by the form issue or not. Example code:
<form>
<input name="cName" type="text" class="input-xlarge" id="input01" placeholder=
"Enter title" />
<div class="control-group">
<hr />
<label class="control-label" for="select01">Select box 1</label>
<div class="controls">
<select id="select01" name="type" onChange="reportModification(this.value)">
<option>One</option>
</select>
</div>
</div>
</form>
<button class="btn btn-primary" onClick="next()">Next</button>
This is not the exact code from the page, just a replica.So it might not be valid html in some places. Thanks for the help :)

The reason you get parameters in the url is that a get request is used instead of a post request. you should use:
<form method="POST" action="">
Also why is your button outside the form? you could have this instead:
</div>
<input class="btn btn-primary" type="submit" value="Next" onClick="next()" />
</form>

I think your button has to be inside the form element. You could use an onsubmit in the form element to intercept the form before it gets sent to the server. Here you could manipulate the values before they go. You would also need an action attribute in the form. If your function returns true, the data will be submitted, false and it won't.