I am trying to post my Angular form to my Post method in my Api Controller :
<div data-ng-app="app" ng-controller="FixtureAddController">
<form name="form" class="col-xs-2" id="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.StageName.$invalid}">
<label class="control-label" for="StageName">Stage Team</label>
<div class="controls">
<select class="form-control" ng-model="fixture.StageName" ng-options="stage.StageName as stage.StageName for stage in stages" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.StageName.$dirty && form.StageName.$error.required">Stage required</span>
</div>
</div>
....other fields....
<div class="form-actions">
<button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">{{action}}</button>
Cancel
</div>
</form>
</div>
Whether I set ng-model to fixture.StageName or fixture.StageId, it always passes the StageName to my Post method, but I need it to pass the StageId. How do I get the Id to be passed?
Try changing ng-options as well to use StageId.
See also: Working with select using AngularJS's ng-options
try this:
ng-options="stage.StageId as stage.StageName for stage in stages"
Related
I need one help.I need to set drop down value as blank after finishing one action using Angular.js.I am explaining my code below.
<div style="height:270px; overflow-x:hidden; overflow-y:scroll;" ng-show="viewOrderTable">
<div class="table-responsive dashboard-demo-table">
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)">
<option value="">Select Status</option>
<option value="In-progress">IN-PROGRESS</option>
<option value="Dispatch">DISPATCH</option>
<option value="Delivered">DELIVERED</option>
<option value="canceled" ng-if="p.pro_status =='Ordered' && p.pro_status=='In-progress'">CANCELED</option>
<option value="Returned" ng-if="p.days <= 48 && p.pro_status=='Delivered'">RETURN</option>
</select>
</div>
</div>
from the above list when user is selecting DISPATCH the below form is opening.
<div class="" ng-show="viewDispatch">
<div style="padding-bottom:20px;">
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth" style="width:120px; text-align:left;">Dispatched Date& Time :</span>
<div class="datepicker" date-format="dd-MM-y h:mm:ss" button-prev='<i class="fa fa-arrow-circle-left"></i>' button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input type="text" name="dispatch_date" class="form-control" id="dispatch_date" ng-model="dispatch_date" placeholder="Add Dispatched Date& Time" ng-change="clearField('dispatch_date');" />
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="col-md-12 text-right">
<button type="button" class="btn btn-success" ng-click="addDispatchData();">Submit</button> <button type="button" class="btn btn-danger" ng-click="clearDispatchData();">Back</button>
</div>
</div>
</div>
The controller side code for this action is given below.
$scope.changeOrderStatus=function(orderid,email,prodataid,order_status,hour){
if(order_status=='Dispatch'){
$scope.viewOrderTable=false;
$scope.viewDispatch=true;
pro_dataId=prodataid;
order_Id=orderid;
dStatus=order_status;
email=email;
}
}
When user is clicking on back button its again coming to its original state but drop down DISPATCH option is displaying where i need to reset the drop down list again.
$scope.clearDispatchData=function(){
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
}
I did like above but its not resetting .Please help me to resolve this issue.
You can use ng-init for this in your html file
<select class="form-control" id="status" ng-model="order_status" ng-change="changeOrderStatus(order_id,shipping_email,p.pro_data_id,order_status,p.days)" ng-init='order_status == 0'>
May be digest issue you can try using $timeout so you should inject $timeout in your controller before use.
$scope.clearDispatchData=function(){
$timeout(function() {
$scope.viewOrderTable=true;
$scope.viewDispatch=false;
$scope.order_status='';
});
}
I have the following form:
<form name="ff" ng-submit="formSubmit(ff)" role="form" class="form-horizontal" id="form-{{context.identifier}}" novalidate>
<div class="col-xs-12 box-shadow">
<div class="col-xs-6" style="margin-top: 1em;">
<input type='hidden' name='nodeIdentifier' value='{{context.currentStep.identifier}}' />
<input type='hidden' name='contextIdentifier' value='{{context.identifier}}' />
<div class="form-group">
<label class="control-label col-xs-4" for="requestor_name">Approve:</label>
<div class="col-xs-8">
<select name="form.field.decision">
<option value="Approved">Approved</option>
<option value="Denied">Denied</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="form.field.reason">
Reason:</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="reason" required minlength='4' maxlength='255'/>
</div>
<div ng-messages="ff.reason.$error" role="alert">
<div ng-message="required">You did not enter a reason</div>
<div ng-message="minlength, maxlength">
Your reason must be between 4 and 255 characters long
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="submit" />
</div>
</div>
</div>
</form>
Here is the code to log what gets submitted in formSubmit(data):
console.log("Data");
console.log(data);
My form is always showing valid. Why is the angular validation not working? I have included the nagular messages too.
You got no ng-model bound to your input fields. Looks like ngMessages needs those.
EDIT: found a comment on a tutorial, because I wasn't 100% sure:
tutorial comment:
fyi that not including the ng-model attribute on validated fields will
break the form validation
I have a simple form that I wish to POST to my server. The bindings in AngularJS work except on my select. On my select I'm not getting a value:
Here is my markup:
...
<div id="divAccountName" class="isNotAvailable">
<label for="inputAccountName">Account Name:</label>
<input name="inputAccountName" required type="text" data-ng-model="register.accountName" data-ng-blur="checkAccountAvailability($event)" />
<span></span>
</div>
<div class="account">
<label for="inputAccountType">Account Type:</label>
<select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.Type for a in accountTypes.value" required>
<option value="" data-ng-if="false"></option>
</select>
<span></span>
</div>
<div class="recaptcha">
<div id="contact-recaptcha" class="g-recaptcha"></div>
</div>
<div>
<input type="submit" value="Register" data-ng-click="registerUser(register)" />
</div>
The register object that gets passed to registerUser() has all my input values except the select value. So when I $resource.save() it to my webserver the value for register.accountType is null.
The account types are populating correctly from my controller, so they are selectable.
Hi Hope this plunker will help you
<select name="inputAccountType" data-ng-model="register.accountType" data-ng-options="a.name for a in accType track by a.type" required="">
Plunker
How would I get the data from email address or password? In my case I have a combo box with an ng-model="selectedObject" assigned to it. However in my controller, $scope.selectedObject does not contain any data. It doesn't seem to be bound. Also, this binding worked before I added the directive. Any ideas?
<modal title="Remove a Group" visible="showRemoveModal">
<form name="form" class="form-horizontal" role="form">
<div style="width:500px">
<div class="form-group">
<label class="control-label" for="Name">Name </label>
<select ng-model="selectedGroupForDelete" ng-options="group.Name for group in groups" />
</div>
</div>
</form>
<div class="modal-footer">
Remove
Cancel
</div>
</modal>
Here is the link to a sample:
http://jsfiddle.net/alexsuch/RLQhh/
I have a very large search form that contains, among other fields, 8 select controls which must be populated from web services. I'm struggling a bit with how to best accomplish this using AngularJs. Do I call one, and put the next in the 'then' clause, and then ext in that 'then' clause, and so on? Just looking at that makes me think there must be a better, well-formed method of doing this that I'm just missing because I'm new with Angular...
To illustrate the issue, I have the following HTML (part of the entire form):
<div class="row">
<div class="col-md-12">
<div class="col-md-2">
<label for="ddlRace">Race</label>
<select id="ddlRace" class="form-control"></select>
</div>
<div class="col-md-2">
<label for="ddlHairColor">Hair Color</label>
<select id="ddlHairColor" class="form-control">
</select>
</div>
<div class="col-md-2">
<label for="ddlEyeColor">Eye Color</label>
<select id="ddlEyeColor" class="form-control">
</select>
</div>
<div class="col-md-2">
<input type="text" id="tbHeight" class="form-control">
</div>
<div class="col-md-2">
<input type="text" id="tbWeight" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="tbStreetNumber">House Number</label>
<input type="text" id="tbStreetNumber" class="form-control">
</div>
<div class="col-md-2">
<label for="ddlStreetPrefix">Prefix</label>
<select id="ddlStreetPrefix" class="form-control">
<option value="">Prefix</option>
</select>
</div>
<div class="col-md-5">
<label for="tbStreetName">Street Name</label>
<input type="text" id="tbStreetName" class="form-control">
</div>
<div class="col-md-2">
<label for="ddlStreetSuffix">Suffix</label>
<select id="ddlStreetSuffix" class="form-control">
<option value="">Suffix</option>
</select>
</div>
</div>
I have to populate the Race, Hair colors, Eye colors, Street prefix and Street suffix from service calls. I have a factory setup with calls for each of those, but I need to run all of them when the form initially loads so I can populate the fields. So what is the best method of doing this using the deferred/promise API?
Call each promise, one after the other without chaining them together with 'then' clauses. Otherwise, if you do they will run serially - which is not what you want.
Use $q.all to register a success/error callback when all promises are resolved or if something goes wrong:
var p1 = promise1();
var p2 = promise2();
var p3 = promise3();
$q.all([p1, p2, p3])
.then(
function() { /*success*/ },
function() { /*error */ }
);