I am working on a website in AngularJS. I have a form which is set to "display:none" on purpose.
I have a button which says create. What i want is that when i click on the create button the form set to "display:none" should change to "display:block" and the create button should hide.
Also after submitting the form , the form should hide and the create button should be visible again.
P.S: Now i understand that there are a couple of ways to do this, like i could use the ng-show or ng-hide directive. OR i could use ng-click directive. I want to know what is the best programming practice in this case when developing a serious and professional web application.
Its a simple thing so if you could please provide the code that would be great.
Simply use the ngClick directive with the ngShow directive see below for a working example:
var myApp = angular.module('myApp', []);
myApp.controller('FormController', ['$scope',
function($scope) {
// init showForm to false;
$scope.showForm = false;
// init empty user object for our form
$scope.user = {};
$scope.submitForm = function() {
// logic when the form is submitted
//...
// reset the user
$scope.user = {};
// finally hide the form
$scope.showForm = false;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FormController">
<button ng-hide="showForm" ng-click="showForm = true">Show form</button>
<form ng-show="showForm" ng-submit="submitForm()">
<input type="text" name="firstname" ng-model="user.firstname" />
<input type="submit" value="submit" />
</form>
</div>
</div>
We are setting the form to show if showForm is true.
This variable is toggled using the ngClick directive on the button element and is also explicitly set to false in the controller within the submitForm function.
We use the ngSubmit directive to bind submitForm() to the onsubmit event. When the form is submitted, you run your logic and then the form is reset and hidden.
I'd use ng-click along with ng-show.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="showToggle">
<form ng-submit="showToggle = false"></form>
fghfgh
</div>
<button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button>
</div>
That will start hidden, and show when you click the button.
Initially show Click To Show button and when click on this button then will show your content and show another button Click To hide button so also need to use ng-show for both buttons.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="isShow">
<p>here your form or other content
<p>
</div>
<button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button>
<button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button>
</div>
Related
$pristine property of the form is not updated when the hidden text is updated for first time AngularJS
I have got a form in AngularJS and I want to know if any field of the form is updated.
when a checkbox is updated, then the corresponding $pristine property is not updated.
So I added a hidden text box which is bind to same ng-model of a checkbox.
But it is not working for the first time and works from the second time on.
The HTML code is below -
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<body ng-app="formApp" ng-controller="formController">
<div>
<form name="myForm">
<label>Personal Question</label>
<div class="checkbox">
<label>
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
ng-click="onClick()"> Are you awesome?
<input type="text" name="hidden-awesome" ng-model="formData.awesome"
ng-hide="true"/>
</label>
</div>
</form>
</div>
</body>
</html>
And the AngularJS code is below -
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
$scope.onClick = function() {
alert('is myform is not modified? '+ $scope.myForm.$pristine);
console.log(JSON.stringify($scope.myForm))
};
});
I have my code in plunker here.
How should I handle this situation?
Use the ng-change directive instead of ng-click:
<input type="checkbox" name="awesome" ng-model="formData.awesome"
ng-true-value="ofCourse" ng-false-value="iWish"
̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
ng-change="onClick()" > Are you awesome?
The ng-change directive adds a $viewChangeListener that is invoked after the user operates the control.
The ng-click directive adds a click handler that is invoked before the ngModelController updates the model.
Note: Checkboxes can be focused using the tab key and operated with the enter key as well as by clicking with the mouse.
For more information, see
AngularJS ng-change Directive API Reference
After I click submit in a form, some javascript runs to modify the data and sends it to whatever the form action is specified in the HTML:
// Submit the form:
// $form.get(0).submit();
$('.submit', $(event.target.form)).click();
I would like to instead use ng-click and send that info to an angular function, such as vm.checkout().
How can I make this happen?
Use ngSubmit directive instead of ngClick for form submit.It binds to the submit event which is fired when a form is submitted.
ng-submit works only when forms submitted.
where as ng-click can work without form submit event.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.submitMe = function () {
alert('Submitted');
};
});
<div ng-app="myApp" ng-controller="MyCtrl">
<form ng-submit="submitMe()" name="myForm">
<button type="submit">submit</button>
</form>
</div>
JavaScript
$scope.submit = function(data){
// do something with data
}
HTML
<form>
<input type="text" ng-model="temp.name" name="name"/>
<button type="button" ng-click="submit(temp)">Submit</button>
</form>
If it is a form you are submitting you should use ng-submit. Add the ng-submit tag with the corresponding function which will be in your controller. Then, you will be able to handle the data from your form submission.
For example:
<form ng-submit="submit()" ng-controller="ExampleController"></form>
I have sample code like this:
Html Code:
<body ng-controller="MainCtrl">
<form name="myForm">
<input name="myText" type="text" name="test" ng-model="mytext" required />
<button ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
</form>
</body>
Js code:
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.save = function(){
//logic or http method
console.log("Test");
}
});
Attached the code in this link: Click Here
Logic:
Default save button disabled.
After enter the form enable the button.
After save again disable the save button.
Again user enter the text need to enable save button.
Note: Here I attached only one input but I have multiple input fields.
Also, In save function I had logic data save into database.
You can use $pristine to identify if there were any changes to the form and enable button only then:
<body ng-controller="MainCtrl">
<form name="myForm">
<input name="myText" type="text" name="test" ng-model="mytext" required />
<button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
</body>
Notice how $pristine is used on ng-disabled:
ng-disabled="myForm.$invalid || myForm.$pristine"
In this case button will be disabled if form is invalid or if there were no changes to the form.
If you use this approach you also need to set the form to pristine after saving the data. You can use method $setPristine:
$scope.save = function(myForm) {
// set form to pristine
myForm.$setPristine();
}
Notice that there is a form parameter which is used to pass a form to the method. In HTML you also need to pass this parameter as part of ng-click:
ng-click="save(myForm)"
Here is JSFiddle that demonstrates the functionality
For more information check out documentation of FormController.
you have disabled the submit button when the form is invalid.
myForm.$invalid
so whenever a required field is blank the form will be invalid and button will be disabled. As soon as all the required input in the form have values, submit button will be enabled.
To make it disabled you need to reset all the modal variables of the required inputs once the save has done its work i.e on the success call back of http request reset the model variables.
Well here is how i would do it, i'll add another tracking variable. something like this.
$scope.btnStatus = true;
$scope.save = function(){
//logic or http method
$scope.btnStatus = false;
console.log("Test");
}
$scope.onChange = function(){
if($scope.btnStatus == false)
$scope.btnStatus = true;
}
and the html would look like this.
<form name="myForm">
<input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required />
<button ng-click="save()" ng-disabled="myForm.$invalid || !btnStatus">Save</button>
</form>
Here is a working code based off of your code.
I'd like to display a form containing validation and a submit button.
I'm new with Angular, and I'm not intireli sure how to get started.
- I'd like to get a direction of what to do or perhaps some initial
indication, of what Controller to use.
JS:
myApp.controller('jsonCtrl', function($scope, $http) {
$http.get('form.json').success(function(result) {
});
HTML:
<form ng-controller="jsonCtrl">
<fieldset>
<div demo-directive ng-repeat="field in fields">
</div>
</fieldset>
</form>
Plunker
I'd like to display a form containing validation and a submit button.
You just need to write simple HTML for this
now, as I'm new with Angular, I apologise about that, I'd like to get a direction of what to do or perhaps some initial indication, of what Controller to use
Generally people bind a specific section to a specific controller and, obviously that is going to be the case for you.
In the controller you'll have two methods which will address to submit and validate buttons.
<my-form>
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div my-directive ng-repeat="field in fields">
</div>
</fieldset>
<button type = "button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit"> Submit </button>
</form>
</my-form>
Now, the main div or body etc. which is parent for the code written above and is linked to a specific controller will have two functions to address to onValidate() & submitForm()
The user of my web should enter a simple code using buttons in my form and after that he should click Ok or hit enter and continue with proccess.
The thing is that the enter key is not submiting my form, is executing other method that is called from ng-click. How can avoid enter key call the ng-click method?
myapp.js
var myApp = angular.module('myApp',[]);
myApp.controller('myformcontroller', ['$scope', function ($scope){
// Procesing data from form.
$scope.signin = function () {
}
}]);
myApp.controller('mycontroller', ['$scope', function ($scope){
$scope.do = function() {
alert('ng-click pressed!');
}
}]);
myform.html
<div ng-controller="myformcontroller">
<form name="myForm"
role="form"
ng-submit="signin()"
novalidate>
<input type="text"/>
<div ng-controller="mycontroller">
<a href="javascript:void(0);" ng-click="do()">
clickme!
</a>
</div>
<button type="submit">Ok</button>
</form>
</div>
Press click me and hit enter key after on My Fiddle
You can ommit html rules with jquery.
Add id to a form and button first:
<form id="mydiv" name="myForm"
role="form"
ng-submit="signin()"
novalidate>
<div ng-controller="mycontroller">
<a href="javascript:void(0);" ng-click="do()">
<img src="img/a-letter.png" alt="">
</a>
</div>
<button id="mydiv2" type="submit">Ok</button>
</form>
And then set listener on enter up:
$("#mydiv").keyup(function(event){
if(event.keyCode == 13){
$("#mydiv2").click();
}
});
So it's not elegant, but you can submit form with simulating click on enter pressed.
It is not blocking. You're missing a standard input to bubble the properly handled click event. If there is no input, the form is not submitted by default. It's not an angular issue. Take a look here https://stackoverflow.com/a/477699/4573999
EDIT
More detailed explanation based on comments. The question is not about the submit element. Sure, you have a button type submit. The for other elements inside the form there is a default behavior. And for input element the default on enter key is to submit the form that it is surrounded by. But for the anchor tag it is not. Because it is not supposed to provide any data. Why would you want to submit a form on a link? So in your case you should submit the form programmatically by calling appropriate method.
myApp.controller('myformcontroller', ['$scope', function ($scope){
$scope.signin = function () {
alert('submit!');
}
}]);
myApp.controller('mycontroller', ['$scope', function ($scope){
$scope.do = function() {
alert('ng-click pressed!');
$scope.signin();
}
}]);
Check updated fiddle
If you'd like to get this in a generic way, you can parse the ng-submit value like here How to programmatically submit a form with AngularJS