I have a form whose ng-submit is to move to the next question.
<form ng-submit="BC.next()" novalidate>
<input type="submit" value="Next Question"/>
<button id="previous" ng-click="BC.previous()">Previous Question</button>
However, whenever I click on the previous button, after executing, it then triggers the BC.next() I'm so confused, does anyone know why this is happening? I even tried closing the <input type="submit"> tag with a </input> but that didn't fix it.
Make sure that all other button in the form that are not submitting it will be from type="button".
<form ng-submit="BC.next()" novalidate>
<input type="submit" value="Next Question"/>
<button type="button" id="previous" ng-click="BC.previous()">Previous Question</button>
You can see the details: How to prevent buttons from submitting forms
TL;DR for the post: HTML5 defaults <button> as <button type="submit"> so you need to change this manually.
Related
I am new in angular JS, working with existing project on angular 1.2.16
please check the code sample
<form role="form" name="UserCreateForm"
novalidate class="biocheck-form">
<div class="row">
<div class="col-xs-4"> <input class="input-forms" placeholder="Usuario" aa-field-group="UserCreate.data.username" type="text" aa-label="Usuario"
required maxlength="20"> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="ejemplo#mail.com" aa-field-group="UserCreate.data.email" type="email"
aa-label="Email" required> </div>
<div class="col-xs-4"> <input class="input-forms" placeholder="" aa-field-group="UserCreate.data.newPassword" type="password" aa-label="Contraseña"
required> </div>
</div>
Rol
</div> <button type="submit" class="btn btn-primary pull-right" aa-submit-form="UserCreate.on.doUserCreate()"> Guardar </button> <button class="btn btn-cancel pull-right" ng-click="UserCreate.on.toUserList()"> Cancelar </button> </form>
I want to check debug the next flow of the code. If anything is unclear please comment.
I want to check how it is save the data in DB this project used yii for handling server side request.
Thanks
If i understand correctly you need to open the developer tools in your browser, go to the Source tab and find the js file that holds the function on your ng-click. Then put a breakpoint there and click the button. The browser should stop in the breakpoint and with F10 you can go line by line to your code.
I have a grid of students and a button. When a user clicks it, a new modal is shown.
In the modal there are some inputs and a button "save".
When a user clicks save via angular, the new student is added and the modal is closed.
I want to prevent the modal from closing when the input are not filled.
How can I do this?
In other words, I want the save button to not do the job of ng-click and data-dismiss="modal".
You can disable button if inputs didn't validated (required, max, etc.) like this:
<form role="form" name="formInTheModal" id="formInTheModal" class="form-horizontal">
<div class="form-group">
<label for="inpDummy" class="col-sm-4 control-label">Enter</label>
<div class="col-sm-8">
<input class="form-control" type="text" id="inpDummy"
ng-model="inpDummy" maxlength="50" required>
</div>
</div>
<button type="button" class="btn btn-primary" ng-click="doJob()"
ng-disabled="formInTheModal.$invalid" > DO
</button>
</form>
In my form I used ng-pattern for date, when i entered the wrong pattern and submit the form, its get submitted. Here my code.
<form role="form" name="editForm" ng-submit="saveRecord()">
<label class="control-label">DATE</label>
<input type="text" ng-model="userRecord.date" ng-pattern='/^((0[1-9]|1[012])[\/](0[1-9]|[12][0-9]|3[01])[\/](19|20)[0-9]{2})*$/'
name="date" class="form-control" required/>
<div role="alert">
<span style="color:red" ng-show="editForm.date.$dirty">
<span ng-show="editForm.date.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span ng-show="editForm.date.$error.required">date is required.</span>
</span>
</div>
<button type="submit" class="btn btn-primary" >Save</button>
</form>
It will display the error also, but if i submit the form its get submited.
I have tried with several searches but could not find solution for this.
You can go down 2 paths:
Disable the form button as long as the form is invalid
You need to check in your form submit function if the form is valid or not
Solution 1
<button type="submit" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
Solution 2
<form role="form" name="editForm" ng-submit="saveRecord(editForm.$valid)">
And now in your controller do the next in the saveRecord function:
$scope.saveRecord = function(valid) {
if(!valid) { return; }
}
I think you have missed novalidate directory in form tag
like
<form role="form" name="editForm" ng-submit="saveRecord()" novalidate>
and edit also validate with submit button like
ng-show="editForm.$submitted && editForm.date.$error.pattern"
ng-show="editForm.$submitted && editForm.date.$error.required"
i hope its help
Below is the code to stop submitting page if pattern does not match
<span class="error" style="color:red" ng-show="externalLinkForm.link.$error.pattern">
Please use hash</span>
To study detail about the validation rule needed in ng-pattern please see the link to get in detail of the validation rules
https://www.w3schools.com/Jsref/jsref_obj_regexp.asp
According to the docs, pressing enter in a form would "trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)". Is there any way to instead set which button should be triggered?
I have a form in which pickadate.js creates some button elements before the submit button.
It doesn't matter how many buttons are before the submit button.
If you have ngSubmit directive on your form element function inside ng-submit="" will be fired.
For example.
<div ng-controller="MyCtrl">
<form ng-submit="processForm()" name="myFormName">
<input type="text" ng-model="myForm.name" placeholder="name" required="required"/>
<input type="text" ng-model="myForm.email" placeholder="email" required="required"/>
<input type="button" value="First button" ng-click="alert('First button')"/>
<input type="button" value="Second button" ng-click="alert('Second button')"/>
<input type="submit" value="Submit"/>
</form>
</div>
When you press the 'Enter' key (in my example) angular will call $scope.processForm function and you will see "Submitting form.." message.
$scope.processForm = function(){
alert("Submitting form..");
}
I've created JSFiddle example for you.
I have this form:
<form ng-submit="submit()" action="/api/project" method="post">
<input type="text" name="prj_title" ng-model="project.prj_title" >
<input type="submit" class="btn btn-block btn-success btn-lg" value="Request">
</form>
It works, but problem is the url changes to /api/project. I don't want this. I just want to post my data to /api/project.
How do I avoid this?
omit the action attribute and do all the logic through your submit method
<form ng-submit="submit()">
<input type="text" name="prj_title" ng-model="project.prj_title" >
<input type="submit" class="btn btn-block btn-success btn-lg" value="Request">
You don't need it, since Angular does the major work here
Quote from the docs:
Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.