I am creating a form wizard which has three forms in three different tabs and the user can only go to next tab once the form in the current tab is validated.
It works fine as long as there are no controllers on each form. Since I need to do some logic, I am attaching controllers to each of these forms but once the controllers are put, the tabs are getting enabled even when the form is invalid. Here's the plunkr link
`http://jsfiddle.net/bs4agngu/
Regards,
Charan
check this : how to disable external button in angular when form is invalid
you can use something like this :
<input ng-disabled="formName.$invalid" type="button" class="btn btn-primary" ng-click="$broadcast('Save')" />
Related
I am transitioning from jquery to angularjs. I am trying to develop a small app in SPA style. Left side is the menu that controls the content on the right side. Left side menu has its own controller. When the user selects a checkbox and clicks on 'Go', the checkbox value should be passed to the controller that controls the right side content. Here is the link to the app. Below are the issues I have.
1)I am stumped on a simple problem of accessing checked values of a checkbox. How do I access values of checked checkboxes. The checboxes are on left side menu, and I am using ng-model to currently access the values as below
index.html
<div id="searchOne">
<ul>
<li ng-repeat="searchOneCB in main.checkBoxOneData">
<input type="checkbox" name="firstSearch" id="firstSearch_{{searchOneCB.code}}" ng-model="main.selected[searchOneCB.code]" />
{{searchOneCB.description}}
</li>
</ul>
<button class="btn btn-primary" style="width:80px;margin-right: 10px" ng-click="main.submit()">
Go
</button>
</div>
MainCtrl.js to access the checkbox value.
main.submit = function() {
console.log(main.selected);
}
The values are now in the form of an array as below
[BBBB: true, AAAA: true].
Is this the right way to access the values? What is the best way to retrieve only the checked checbox values?
2) Another question is, once I get the list of checked checkboxes values, how can I pass them to the contentCtrl.js that controls the content on right side?
You should inject the controller into the controller you want to use. The answer has already been answered here is the link.
How do I inject a controller into another controller in AngularJS
I am using angular-ui-bootstrap lib in my application. I need to create custom alert with button inside firing modal window.
I have tried two options:
Redefine module angular.module("template/alert/alert.html", []) from ui-bootstrap-tpls.js. Didn't work as I didn't manage to implement a button firing popup window.
Create a custom module based on "template/alert/alert.html" one. Found myself lost in a number of controllers in order to make popup window working.
What is the best approach to achieve that?
If I understood the question, you want to add a button to the alert that will launch a modal.
Plunker Demo
The easiest approach is to simply add your button into the alert template. In the Plunker demo, I copied both the contents of the UI Bootstrap alert and modal demos. Then I copied the alert template and added it to a script tag on the page. Inside the standard alert template I added a button as follows:
<button ng-controller="ModalDemoCtrl" class="btn" ng-class="'btn-' + (type || 'warning')" ng-click="open()">Open Modal</button>
That's an incredibly basic approach, but it should be a good starting point for you. If I were doing this in production, I would add my custom templates to the template cache instead of using script tags on the page itself and I would create a custom directive for my modal button so that I could pass any relevant information from my alert to my modal instance and do away with having to hard code the ng-controller on the button itself.
Just put your alert directive inside the modal template:
http://plnkr.co/edit/XJtZWQOqFVc6svECcat0?p=preview
In angularjs I'm wondering what the differences are between ng-submit and ng-click? Specifically, pros and cons of each and when should you one or the other? Thanks!
**EDIT**
I've looked in to this a bit more but I'm still wondering what (if any) the benefit is of using ng-submit? Could you use an ng-click in place of all ng-submits? Would this cause any problems? Thanks again!
The ngSubmit directive binds to the submit event in the browser, which is fired when a form is submitted.
From MDN:
Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.)
So you might use it to submit a user sign-up form, or something like that.
On the other hand, the ngClick directive can apply to any kind of element.
From source:
The ngClick directive allows you to specify custom behavior when an
element is clicked.
Use it to allow your user to interact with your page in some way other than submitting a form. Maybe to click on a 'previous' or 'next' pager button, or maybe a map or something.
Angular prevents the default action (form submission to the server) unless the element has action, data-action, or x-action attributes specified.So when using angular with forms without these atributes ng-click and ng-submit can be used to specify which javascript method to call.In either call you can get all input values in a scope because of two-way data binding property of angular.
Could you use an ng-click in place of all ng-submits? Would this cause any problems?
it can be used but when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately.
My favorite reason for using ng-submit is that it allows you to press the <Enter> key while focused on a form input etc. and the form will submit. (Assuming of course that you have a button of type="submit" in the form.)
Its more keyboard friendly and accessibility friendly than having ng-click on a button, because with ng-submit, a user can click on the submit button or they can press <Enter>.
If we want the form not to be submitted when it is invalid, then instead of ng-click on the button, we will use ng-submit directive on the form itself
<div class="row">
<form name="adduser" ng-submit="AddUser(adduser.$valid)">
<div id="name-group" class="form-group-lg">
<input type="text"
required
name="name"
ng-model="userfullName"
class="form-control"
placeholder="Full Name">
</div>
In the ng-submit we calling a function AddUser from the controller with a parameter formname.$valid. This submit function will be only called when form is valid or in other words all the user input of the form is valid. Keep in mind that in this case from would not be submitted if form is not valid
When we use ng-click , form will be submitted even if it is invalid. Two observations for ng-click are as follows:
We were able to submit the form even if form was not valid
For the invalid inputs, the value was set to undefined in the controller
ng-submit associated with forms, this event fires when u submit form. Where as ng-click can work without form submit event
I want to click Save button when I press Enter..For this, I created a directive named "onEnter" but I don't know how to trigger 'ng-click' on savebutton wheen Enter key press. I made a sample here
http://plnkr.co/edit/vnphuxQRQQfVmWtsGhip?p=preview
Please suggest!
If you change:
<input type="button".. value="Save" />
to
<input type="submit".. value="Save"/>
Then the form will act normally listening for the enter event. No need for a directive as it is already built in.
Angular also supports an ng-submit event. This post will provide more information:
Submit form on pressing Enter with AngularJS
I have one form with some fields with submit and reset button. I am using cakephp model validation to validate empty and special characters.
If I enter invalid data and submit the form, its displaying error message.After that I click on reset button,its not reset the form. Before validation error message its working fine.
My reset button code is
<input type="reset" class="uiBtn" value="Reset" name="reset"> <input type="submit" class="uiBtn" value="Save Section" name="">
Also I used jquery reset function, its also not working..
Please any one help me what is the problem???
It doesn't work because HTML Reset buttons reset the controls in a form back
to the value they were when the page first loaded. When you post back, the
PHP engine sets the values of the controls again, so the Reset would do
nothing more than change the controls back to what they were when you loaded
the page after the postback.
The only solution to this is to either do it client-side with javascript or
server-side on a postback. Just iterate through all of your controls and set
their properties appropriately.
Following Js Code would certainly work, assuming you don't have another onload event already set.
window.onload = function () {
for(var f in document.getElementsByTagName("form"))
f.reset();
}
This post might help you to reset the form after submit.