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.
Related
When I click the button it works, but when I try to add "quantity" and click the arrows to do it - it immediately runs the function. How do I avoid it?
<form ng-click="ctrl.launch(quantity, someOtherInfo)">
<div class="quantity">
<input type="number" ng-model="quant" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" >LAUNCH!</button>
</form>
I tried to place ng-click right in the button, but it just doesn't work at all.
You should change ng-click to ng-submit.
Here is helpful link
your script should look like this I think:
<form>
<div class="quantity">
<input type="number" ng-model="quantity" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" ng-click="ctrl.launch(quantity)>LAUNCH!</button></form>
ngClick does not submit the form.You should change ng-click to ng-submit.
<form ng-submit="ctrl.launch(quantity, someOtherInfo)">
<div class="quantity">
<input type="number" ng-model="quant" ng-init="quant=1" min="1" step="1">
</div>
<button class="hit_it_button" >LAUNCH!</button>
</form>
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>
I have two buttons, one has a click event and redirects to login page.
Another button is simply used to show pop-up.But clicking on second button also redirects me to login page
This is my code
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>MY<span>Demo</span></div>
</div>
<br>
<div class="register" ng-controller="RegisterUser">
<input type="text" class="margin-15" placeholder="Name" ng-model="user.name" name="user"><br>
<input type="text" class="margin-15" placeholder="Date Of Birth" ng-model="user.dob" name="user"><br>
<input type="text" class="margin-15" placeholder="Gender" ng-model="user.gender" name="user"><br>
<input type="text" class="margin-15" placeholder="Email" ng-model="user.email" name="user"><br>
<input type="text" class="margin-15" placeholder="Contact Number" ng-model="user.phn_number" name="user"><br>
<input type="text" class="margin-15" placeholder="username" ng-model="user.uname" name="user"><br>
<input type="password" class="margin-15" placeholder="password" ng-model="user.password" name="password"><br>
<a class="waves-effect waves-light btn-large" ng-click="registerUser()">Register</a>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
</div>
I tried many possible ways, but it is not working for me.
If the second button that was supposed to open a modal is that
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
then it has no ng-click directive.
You should add an ng-click with a function that opens your modal instance
You can find an example here
The problem here is href="#modal". When you click the button, angular looks for "#modal" route in the route config. Since "#modal" route is not present it redirects you to default route.
Remove href and try to open modal using javascript. For example
<a class="waves-effect waves-light btn modal-trigger" ng-click="showModal()">Modal</a>
In controller:
$scope.showModal = function () {
//show modal
}
As per you described, first button/link is working fine and second button or link is also redirecting to login page.
first of all your second button is not doing this because of the first one, it is reacting like this because second link is searching for a page(treating #modal1 as a url) and if it won't find that page it will redirect to the landing page with having url like #/ .you can either redirect to a page with proper URL or you have to send it to a method by ng-click and provide a MODAL code there.
here is a plunk if you wanna redirect to some page on second click. Plunk
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.
I want to have that after clicking submit button it check if there is something written down in input form if not the ng-class change the span color to red . I want to have red color only after submittion not all the time , here is link :
<form name="myForm" validate class="form-horizontal">
<div class="control-group" >
<label ng-class="{bad: ( myForm.name.$invalid && myForm.name.$pristine ) }" >Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
<span ng-show="isValid('name')">Great!</span>
</div>
<button type="submit">SUB</button>
</form>
http://plnkr.co/edit/m3dqBnpPenbY65xa3PXH?p=preview
you need to track whether submit button clicked or not , here u can maintain a scope variable and detect the form is submitted or not
<button type="submit" ng-click="submitted = true">SUB</button>
if some one clicked the submit then, there is a scope variable called submitted with true value
<label ng-class="{bad: ( myForm.name.$invalid && myForm.name.$pristine && submitted ) }" >Name:</label>
here is the Plunker