HTML
<form role="form" ng-submit="addStore(store)" name="AddStoreForm" novalidate>
<label>Store Category</label>
<label class="checkbox-inline" ng-repeat="store_category in store_cat">
<input type="checkbox" name="store_category" ng-model="store.store_category">{{store_category.name}}
</label>
</label>
</form>
<button type="submit" class="btn btn-primary campwidth">SUBMIT</button>
AngularJS
$scope.store_cat = [
{ name: 'A', selected: false },
{ name: 'B', selected: false },
{ name: 'C', selected: false }
];
$scope.addStore = function(store){
console.log("responsestore", store);
alert(store.store_category);
};
Here I put store category as array. After submit the form. I got alertbox category undefined. I want to sent the result using API. how to fix this problem. PLUNKER
It will work with button tag not with form as in bootstrap <button type="submit" class="btn btn-primary campwidth" ng-click="addStore(store_cat)">SUBMIT</button> here no need of using the form tag b'coz it may leads to conflict in angular.js so, it will work definately for checkbox.
http://plnkr.co/edit/qSFnxTNZ4n63pw3JXZA5?p=preview
You can, do something like that: <button type="submit" class="btn btn-primary campwidth" ng-click="addStore(store_cat)">SUBMIT</button> here
http://plnkr.co/edit/KtBzqeMF9FZt6bnI0MBF?p=preview
You shouldn't use form and take on that function nope, that way is wrong when you use angular.
Assuming your issue is with data format not being pushed into a new store object, here is a solution for that:
<form role="form" name="AddStoreForm" novalidate ng-init="store={}">
<label>Store Category</label>
<label class="checkbox-inline" ng-repeat="store_category in store_cat">
<input type="checkbox" name="store_category" ng-init="store[$index]={name: store_category.name, selected: false}" ng-model="store[$index].selected">{{store_category.name}}
</label>
</label>
<button type="submit" ng-click="addStore(store)" class="btn btn-primary campwidth">SUBMIT</button>
</form>
And the plunker with working example.
Related
I have a form. Post submit, if the form is invalid, the error props out below the input fields.
One can hide the form using Cancel button.
The form can be displayed again using 'Show Form' button.
But the issue: The old form error still persists.
How can one reset the form without setting the ng-model associated with it as the input fields should be empty during load?
The reset, I should be able to do it from html itself and not from the controller.
Code below:
<form novalidate name="form.customForm">
<div class="form-group">
<div>
<label>Name</label>
</div>
<div>
<input type="text" name="name" ng-model="model.name" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.name.$touched && form.customForm.name.$error.required) || (form.customForm.name.$error.required && form.customForm.$submitted)">Name cannot be empty</span>
</div>
</div>
<div class="form-group">
<div>
<label>Age</label>
</div>
<div>
<input type="text" name="age" ng-model="model.age" class="form-control" ng-required="true" />
<span class="red" ng-show="(form.customForm.age.$touched && form.customForm.age.$error.required) || (form.customForm.age.$error.required && form.customForm.$submitted)">Age cannot be empty</span>
</div>
</div>
<button class="btn btn-primary" type="submit" ng-click="submit(form.customForm.$valid);">
Submit
</button>
<button class="btn btn-default" type="button" ng-click="isForm = false;">
Cancel
</button>
</form>
Refer the demo.
I would suggest you write the cancel button logic in the controller, are you sure you want to do it from the html itself?, you can use these statements to reset the form and fields.
form.customForm.$setPristine();
model = {};
form.customForm.$setUntouched();
The updated jsfiddle
On click on Cancel button, you could set
form.customForm.$submitted = false;
This will hide the error messages.
Your cancel button becomes:
<button class="btn btn-default" type="button"
ng-click="isForm = false; form.customForm.$submitted = false;">
Cancel
</button>
See jsfiddle
give the form a name:
<div ng-controller="BlaController as vm">
<form name="vm.formOne">
</form>
</div>
And in the controller do this: (thats how I made it work)
if (vm.formOne) {
vm.formOne.$setPristine();
vm.formOne.$setUntouched();
vm.formOne.$commitViewValue();
}
what about just change the cancel button type to "reset" ?? It's the easiest solution
<button class="btn btn-default" type="reset" ng-click="isForm = false;">
Cancel
</button>
$scope.cancel = function(form){
$scope.isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;
}
<button class="btn btn-default" type="button" ng-click="cancel(form)" ng-show="!isForm">
Fiddle Demo
Or
<button class="btn btn-default" type="button" ng-click="isForm = true;
form.customForm.$submitted=false;
form.customForm.name.$touched = false;
form.customForm.age.$touched=false;" ng-show="!isForm">
Fiddle Demo
I want to enable my form's Ok button only if any of the checkbox is checked, but not sure why its not working. Here is my code
<form id="myForm" class="form-horizontal" role="form" name="myForm" novalidate>
<li ng-repeat="i in templates">
<input name="myTemplate" ng-model="myTemplate" type="radio" ng-value="{{i.id}}" />
<span>{{i.name}}</span>
</li>
<button ng-disabled="!templates.length || !myTemplate" ng-class="{'disabled' : !templates.length || !myTemplate}" class="btn btn-primary ok-btn">
Submit
</button>
</form>
Submit button is always disabled whether I check any radio button or not
You need to use an Object instead of just value in ng-model.
JS:
$scope.myTemplate = {};;
$scope.templates = [
{id: 1, name: 'One'},
{id: 2, name: 'Two'},
{id: 3, name: 'Three'}
];
HTML:
<form id="myForm" class="form-horizontal" role="form" name="myForm" novalidate>
<li ng-repeat="i in templates">
<input name="myTemplate" ng-model="myTemplate.value" type="radio" ng-value="{{i.id}}" />
<span>{{i.name}}</span>
</li>
<button ng-disabled="!templates.length || !myTemplate.value" ng-class="{'disabled' : !templates.length || !myTemplate}" class="btn btn-primary ok-btn">
Submit
</button>
</form>
Demo: http://plnkr.co/edit/eKH2AaPIOEcplfxOsMHQ?p=preview
I am Useing Bootstrap angular datepicker in a form to update my model 'User'.
I set this datepicker 'require' property is true.
UpdateUser.html:
<form name="userForm" novalidate>
<div class="form-group">
<label>Birthday</label>
<p class="input-group">
<input type="text" name="birthday" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="user.birthday" is-open="opened" datepicker-options="dateOptions" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDate($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<span>{{userForm.birthday.$invalid}}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Update</button>
</div>
</form>
UserCtrl.js:
mainApp.controller("detailCtrl", function($scope, $http, $routeParams, DemoService) {
$scope.user = DemoService.get({userId : $routeParams.userId});
$scope.openDate = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
});
So my question is:
Why {{userForm.birthday.$invalid}} is true when I first set the 'user.birthday' to the datepicker?
Plunker:
http://plnkr.co/edit/DkGEVJ?p=preview
This is weird, but changing the initial birthday from '1403575208000' to new Date(1403575208000) fixes this problem.
http://plnkr.co/edit/Wut4sJT5hFcG6EfSYe8t?p=preview
There are a lot of different problems that look the same at angular-bootstrap Github forums.
I am using angular-bootstrap version 0.13.0 and I found that the datepicker has the value:
userForm.$invalid = true
when the date field is empty and other situations, and does not work well.
When you want to validate it, problems arise. In such cases, to avoid datepicker validation I used the following code:
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$error['required'] !== undefined">Update</button>
</div>
Here is my plunkr
http://plnkr.co/edit/Sqog7OqudQkww9WsCUT2?p=preview
There you can see the value of userForm.$error and decide to use ng-required=true or false at 'birthday'.
Hope it helps!
I have a form view in AngularJS and I'm using a modal from Angular-ui to display my form. Functionality wise, everything works great, however, when I dismiss the form, validation pop-ups display if the form is invalid.
This is what it looks like:
The pop-up doesn't show at all when the form is open but only when I click cancel and it starts fading away.
HMTL:
<form name='newGroupForm'>
<div class="modal-body">
<label for="groupName">Group Name:
<input id="groupName" type="text" ng-model='newGroup.name' required>
</label>
<br/>
<label for="groupDesc">Group Description:
<input id="groupDesc" type="text" ng-model='newGroup.desc'>
</label>
<br/>
<label for="groupOwner">Group Name:
<select id="groupOwner" type="text" ></select>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" type="button" ng-click="submit()" ng-disabled="newGroupForm.$invalid">Create</button>
</div>
</form>
Modal Controller:
spApp.controller('newGroupCtrl',
function newGroupCtrl($scope, $modalInstance, groupService){
$scope.newGroup = {
name:null,
desc: null
};
$scope.submit = function(){
$modalInstance.close($scope.newGroup);
}
$scope.cancel = function (){
$modalInstance.dismiss('Cancelled group creation');
};
}
);
Add the novalidate attribute to your form to disable the browsers built in validation:
<form name="myForm" novalidate >
I have a model like this:
$scope.user = { is_active: true }
I'm currently displaying that in my template like this:
<form class="form-horizontal">
<!-- ... -->
<div class="form-group">
<label class="col-sm-2 control-label">Is Active</label>
<div class="btn-group col-sm-5" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Active
</label>
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Inactive
</label>
</div>
</form>
This looks like this in practice:
How can I bind the value of {{ user.is_active }} to this button group in Bootstrap? I'd like the correct button to be depressed based on what's selected in the model.
You may also want to look at the buttons in Angular's bootstrap ui- these are designed to work cleanly with Angular and so they use ngModel directly.
If you go this route you'll need to use ngModel by adding it to your buttons like this:
<input type="radio" ng-model="user.is_active" name="is_active">
Sticking with the default Twitter Bootstrap- it uses the class active to define which label is active. To set this you can use ngClass. For instance on the label you want active when is_active is true you'll want this:
ng-class="{active:user.is_active==true}
And to control the value you'll need to use 'ngClick' on the label to toggle the value.
<label class="btn btn-default" ng-class="{active:user.is_active==true}" ng-click="setActive(true)">
<input type="radio">
Active
</label>
<label class="btn btn-default" ng-class="{active:user.is_active==false}" ng-click="setActive(false)">
<input type="radio">
Inactive
</label>
And the new function:
$scope.setActive = function(val) {
$scope.user.is_active= val;
};
demo fiddle