I have a modal dialog (ui bootstrap dialog) that displays some form fields for selection. when i select and click save, the binding are ok, i can see this from my browser dev tool bar. but when i open the modal again to edit the changes, the binding on the dropdown are lost, they all reset to the first option in the select list, if i look at my model from dev tools the correct values are there but not reflecting on the dialog display.
I have a directive 'display-paramaters' that handles the parameters display
(function(){
function displayParameters(){
return{
scope:true,
restrict:'E',
templateUrl:'app/templates/displayParameters.html',
controller:function($scope,globalContainer){
$scope.globals=globalContainer.variables;
}
}
}
angular.module("App").directive("displayParameters",displayParameters);
})();
The template is
<div>
<div class="col-md-4">
<label class="control-label">{{mapping.CommandMappings[0].Field}}</label>
</div>
<div class="col-md-3">
<select class="form-control hack" ng-model="mapping.CommandMappings[0].SourceType">
<option value="1">Event</option>
<option value="2">Variable</option>
</select>
</div>
<div class="col-md-5">
<select ng-options="field for field in foundFields.entityOptions" class="form-control" ng-if="mapping.CommandMappings[0].SourceType==1" ng-model="mapping.CommandMappings[0].ValueSource">
</select>
<select class="form-control" ng-if="mapping.CommandMappings[0].SourceType==2" ng-model="mapping.CommandMappings[0].ValueSource"
ng-options="variable.value as variable['name'] for variable in globals">
</select>
</div>
I used it as so
<tabset>
<tab heading="Command Mapping">
<div style="margin-top:5px">
<div class="form-group" ng-repeat="mapping in commandMappings">
<display-parameters></display-parameters>
</div>
</div>
</tab>
<tab heading="Variable Mapping">
</tab>
</tabset>
Attached are also images of the dialog before initial select and save and later opening to edit selected options. Also images of the data structure i am binding to.
First Time Dialog opens, i make selections and later clicks save
Opens the dialog again but the bindings are gone, all reset to index 0
Inspects the object from console and find the binding is intact
I do not know why i loose the binding on the view when the dialog opens the second time, but it is correct on the model
data is saved into mapping.CommandMappings[0].ValueSource ,then you close modal dialog which has a controller,
when you again try to open it , modal dialog related controller get initialize
& also ( mapping.CommandMappings[0].ValueSource ={} ) get initialized .
Related
I have a dropdown and a radio button beside it. When an item is selected in the dropdown
and a user clicks on the radio button, I will like the dropdown to reset itself and have
"Select Number" as the default value.
How can i acheive that?
<div class="selection">
<label for="accountNumber" class="lbl">#T("Customer Account:")</label>
<select id="accountNumber" class="sel" name="accountNumber" ng-model="vm.defaultValue"
ng-options="item for item in vm.retrieveAliasName">
<option value="">Select Account</option>
</select>
</div>
<div id="acctsAll" class="all">
<input type="radio" id="AllAccounts" /><span class="lbl">("All")</span>
</div>
First of all you have to assign your input of type radio a model via ng-model directive. Then you have to check wether this model value matches the "All" value and clear default value of your vm.defaultValue.
Moreover if I get it right you need to clear and disable the select input when "All" radio is selected, but you might need an other radio which allows user to choose an option from select input. Based on that I've created this fiddle to help you out.
Notice the following parts:
<input ng-change="vm.clearDefaultValue()" ng-model="vm.areAllSelected" type="radio" id="AllAccounts" ng-value="true" />
and controller function:
this.clearDefaultValue = function() {
this.defaultValue = null;
}
Is there a way to inject some validation - custom or otherwise - that isn't tied to a form element? Like - validate that some condition is met, but have it work with standard AngularJS validation?
Update:
Here's what I'm trying to accomplish:
I have a form contains a list of sections. Each section is controlled by a checkbox, and the section will display (via an ng-if) when the checkbox is checked.
Within each section, there's an opportunity for an item to be selected via a popup modal that is activated by a button click. Until an item is selected for that section, the form needs to be invalid. Once an item is selected for each selection that is checked, then the form needs to be valid.
I have a button at the bottom of the form with an ng-disabled="frm.$invalid". I want that to stay disabled until each section that has been checked contains an item that was selected via the modal.
Update 2:
Here's some example code:
<form class="form-horizontal" role="form" name="frm" novalidate>
<label>Name: </label>
<input type="text" ng-model="name" required/>
<div ng-repeat="orderItem in orderItems">
<input type="checkbox" name="items[]" ng-model="orderItem.selected"/>
<div ng-if="orderItem.selected">
... bunch of form fields
<button ng-click="openExchangeSelectionModal(orderItem)">Select Item</button>
<div ng-show="orderItem.exchange_item">
Selected Item: {{orderItem.exchange_item.name}} - ${{orderItem.exchange_item.price | number: 2}}
</div>
</div>
</div>
<button ng-disabled="frm.$invalid" ng-click="submitOrder">Submit</button>
</form>
Checking if the form is valid won't help you in this case since there is no required input that's not being filled.
What I would recommend is that the disable button would call a function that makes some logic about the number of check boxes expanded and the number of selected items and returns the buttons state (true for active otherwise false)
Let's take the example code you put up:
//some html tags...
<button ng-disabled="checkValid()" ng-click="submitOrder">Submit</button>
</form>
Notice that I changed the frm.$invalid to checkValid function, which is a function that is defined on your controller and can perform any logic you want to determine rather show your submit button or not.
In text box i want to show customer name as per user enter key if user enter A letter then all customer name starting with A letter display in search box.for that i am using "data-list"
but now problem is that if i am writing option value="customer.Name" it display customer Names in text box as per my requirement but at the same time it bind customer Name to ng-model.
I want customer object bind to ng-model
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label">Customer Name :</label>
<input list="browsers" name="browser" ng-model="selectedcustomer" >
<datalist id="browsers">
<option ng-repeat="customer in customers"
value="{{customer.Name}}" >{{customer.Name}}
</option>
</datalist>
</div>
</div>
By writing option value="{{customer}}" it bind selected customer to the ng-model but at the same time it show all customer object in text box that i don't want i want only customer name display in text box
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.customers=[{id :1,Name :'Mahesh',city:'Pune',state:'Maharashtra'},
{id :2,Name:'Mayur',city:'surat',state:'Gujrat'},
{id :3,Name:'Ram',city:'mumbai',state:'Maharashtra'}];
});
There is a nice component from Angular material called md-autocomplete.
If you use this component, it will make you're live easier.
Here is the link to the component : auto-complete with the API
and here is the link to some demos
I'm using ng-Autocomplete which doing perfectly and easily what you're looking for.
I'm using Angular 2 and I'm implementing a dropdown. The first default item in the dropdown should be empty because the system has no logic for inferring the default choice of the user. The user is required to select a value from this dropdown so the dropdown uses standard required field validation for Angular 2 forms like this:
<div class="form-group">
<label for="report">Report Type</label>
<select class="form-control" required
[(ngModel)]="model.reportType"
name="reportType" #reportType="ngModel" >
<option *ngFor="let r of reportTypes" [value]="r">{{r}}</option>
</select>
<div [hidden]="reportType.valid" class="alert alert-danger">
Report Type is required
</div>
</div>
The problem is that when the page is initialized with the empty default dropdown item selected, the required field validation gets triggered and displayed. I'm sure there's a structured way to handle this use case in Angular 2 forms since this is a fairly common use case. Can you suggest a solution for this problem?
Changed your error div to:
<div [hidden]="reportType.pristine || reportType.valid" class="alert alert-danger">
Report Type is required
</div>
Problem: I have a grid for which I implemented Create&Update functionality. On create the user gets a modal dialog with some fields and a few drop-down lists (each drop-down is getting populating with data from the db).
The issue I have is with the update. If the user wants to update a record from the grid, he will select the row and click a button which will open a modal dialog that display all record fields in "non-editable mode". The fields will only become editable if the user click the button "Edit" at the bottom of the modal dialog. The question is: How to get the drop-down (i.e country list) to display only the data for that specific record in "non-editable mode" (let's say Ireland) and once the user will click the "Edit button" the drop-down to still show the same data(Ireland). Unless the user will click on the drop-down which then will show the entire list of countries so eventually can select a different one.
For the sake of example, I am going to post the current implementation for the country drop-down list. This is the code I am using on Create modal dialog, for the Update modal dialog it should be something similar but no idea on how to display the relevant country of the selected record from the grid.
Populate the country drop-down
<div class="control-group">
<label class="control-label">*Country</label>
<div class="input-append">
<div data-ng-init="getCountryDataFromServer()">
<b>Person Data:</b> <select id="countryId" ng-model="contact.countryId">
<option value="">-- Select Countries --</option>
<option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
</select><br>
</div>
</div>
<div class="input-append">
<label>
<span class="alert alert-error"
ng-show="displayValidationError && newContactForm.countryData.$error.required">
<spring:message code="required"/>
</span>
</label>
</div>
</div>
Ng-Init Angularjs directive
//Load countries from JSON and populate the dropdown
$scope.getCountryDataFromServer = function() {
$http({method: 'GET', url: '/tool/protected/country/all'}).
success(function(data, status, headers, config) {
$scope.countries = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
Please use ng-options to create a dropdown-list
<select class="form-control" ng-model="countries.selectedCountry"
ng-options="country in countries">
</select>
Now you only have to set with
$scope.countries.selectedCountry = "that country";
the country you would like to set.
Edit: I saw, you used contact.countryId as model. You also could use that, but you have to be sure that the value you set is exact the same as in the dropdown.
What I did was to create a input field to show the current country name. This field is set to ng-hide when the modal dialog is in the non-editable mode. If the user click the "edit" button instead of the field I get the drop-down list which is set to ng-show (if modal dialog is in editing mode). On the UI, user wont have a clue of whats happening but behind the scene is quite ugly I think...but still, is a solution to my problem.
Code
<div class="control-group" ng-class="{error: displayValidationError && updateContactForm.country.countryId.$error.required}">
<label class="control-label">*Country</label>
<div class="controls">
<input type="text" autofocus required ng-model="contact.countryId"
name="country.countryname"
placeholder="Status" ng-hide="editingUpdateForm" />
<div data-ng-init="getCountryDataFromServer()" ng-show="editingUpdateForm">
<select id="contact.country.countryId" autofocus required ng-model="contact.country.countryId">
<option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
</select>
</div>
</div>
<div class="help-inline"
ng-show="displayValidationError && newContactForm.countryData.$error.required">
<spring:message code="required"/>
</div>
</div>