I am using subscribe in my application I use three subscribe the first two works good but the last observable that I add subscribe doesn't work as I want.
// Listen to likelihood so that everytime it change it will also change the RiskLevel
self.Likelihood.subscribe(function (newValue) {
self.RiskLevelName(GetRiskLevel(newValue, self.Consequence()));
});
self.Consequence.subscribe(function (newValue) {
self.RiskLevelName(GetRiskLevel(self.Likelihood(), newValue));
});
When I change the Likelihood or the Consequence it change the value of the RiskLevelName it's working great. I add a breakpoint in the
self.RiskLevelName(GetRiskLevel(newValue, self.Consequence()));
I noticed that it didn't heat the breakpoint when I change the value of Likelihood. The funny thing is that it change the value of self.RiskLevelName.
I add another code to subscribe to the Account but it's not working. I didn't get any error in the console
self.Account.subscribe(function (newValue) {
console.log(newValue);
});
Here is the way I bind them to my DOM elements
<div class="span6">
<div class="control-group" id="likelihoodModalControlGroup">
<label class="control">Likelihood</label>
<div class="controls">
<select id="likelihood" class="input-large custom" data-bind="value:Likelihood, options:$root.LikelihoodList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Likelihood'">
<option value="0">Select Likelihood</option>
</select>
</div>
</div>
</div>
<div class="span6">
<div class="control-group" id="consequenceModalControlGroup">
<label class="controls">Consequence</label>
<div class="controls">
<select id="consequence" class="input-large custom" data-bind="value:Consequence, options:$root.ConsequenceList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Consequence'">
<option value="0">Select Consequence</option>
</select>
</div>
</div>
</div>
<div class="span6">
<div class="control-group" id="AccountModalControlGroup" >
<label>Account</label>
<div class="controls">
<select class="input-large custom" data-bind="value:Account, options:$root.ProjectList, optionsValue:'Key', optionsText:'Value', optionsCaption:'Select Account'">
<option value="0">Select Account</option>
</select>
</div>
</div>
</div>
Related
I have recently migrated from Angular 9 to Angular 12 and observing form control value issue. Below are the details of the issue:
I have a dropdown control, based on the value selected there are
controls which has to update the value according to my model,
When value of dropdown control is changed , my dependent controls
value is not updating according to the model, in code debug my form
is having the value based on the changes done to drop down, even
though this.form.updateValueAndValidity(); applied, changes are not
reflected in the UI.
Here is the HTML file
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{item.ShortName}}</option>
</select>
</div>
//Below controls are dependent on the above value selected, for each selection change different values to be display
<div class="form-control">
<label class="form-control-label" for="type">Type</label>
<select id="type" name="Selection" formControlName="Type">
<option value="null" selected="true" id="default">Select type...</option>
<option *ngFor="let item of supportedTypes" [value]="item.Type" id="{{item.Type}}">{{item.ShortName}}</option>
</select>
</div>
<div>
<div class="form-control tooltip">
<label class="form-control-label" for="name">Name</label>
<div class="tooltip">
<input type="text" maxlength=13 formControlName="Name" id="name">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="age">Age</label>
<div class="tooltip">
<input type="text" formControlName="Age" NumberOnly="true" id="age">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="Height">Height</label>
<div class="tooltip">
<input type="text" formControlName="Height" NumberOnly="true" id="height">
</div>
</div>
<div class="form-control tooltip">
<label class="form-control-label" for="weight">Weight (kg)</label>
<div class="tooltip">
<input type="text" NumberOnly="true" formControlName="Weight" id="weight">
</div>
</div>
</div>
file which has to update the value
this method is for updating my form contols
updateControls(show: boolean, formMeta: object, data?: { [key: string]: string })
{
Object.keys(formMeta).forEach((formName) =>
{
if (!show)
{
//remove control if none selected
this.form.removeControl(formName);
return;
}
//add controls on value change and update the controls
this.form.addControl(formName, formMeta[formName]);
this.form.get(formName).patchValue(data[formName]);
});
this.form.updateValueAndValidity(); //update my form, but it doesn't reflect the updated content in UI
}
screenshot2
screenshot1
I have 4 fields in a form
Product Field.
Brand Field.
Services Field.
I want to show them all in the index, but when i go to the product url i want to show only product field and services field
I have tried .show and hide method but it's hiding the field for all url
I am trying this method to hide and Now it's hiding as per my request but compromising in the form field, and I don't want that there's an empty blank space.
The issue was different and it fixed now what I did was I created a different id and call the particular id, without compromising the margin and all and it's working like charm now.
<div style="display:none;" class="appointment" id="booking-form-modal" data-backdrop="static" data-keyboard="false">
<form method="POST" action="/submit-request" onsubmit="submitRequest();">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="productDropdown" class="form-control" name="product" required>
<option value="">Select Products</option>
#foreach($products as $product)
<option value="{{ $product['id']}}">{{ $product['name']}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<select id="serviceDropdown" class="form-control" name="services" required>
<option value="">Select Services</option>
</select>
</div>
</div>
</div>
</form>
</div>
Script to redirect as per the request
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('brandDropdown').style.display = 'none';
}
});
</script>
How does your url look like and when do you call the provided snippet?
Could you also provide a more detailed example of your code?
I guess you want to hide the elements "onload"?
If so, then you need to wait until your elements are loaded.
window.addEventListener('load', function() {
if(/repair/.test(window.location.href))
{
document.getElementById('brandDropdown').closest('.row').style.display = 'none';
}
});
The solution was, I added another id so that it didn't compromise my form fields, kindly find the solution below.
<div id="branddrop-row" class="row" >
<div class="col-md-12">
<div class="form-group">
<select id="brandDropdown" class="form-control" name="brands" required>
<option value="">Select Brands</option>
</select>
</div>
</div>
</div>
And here is the script for hiding as per the request. I call the div id instead of select id so that it didn't compromise my form fields.
<script type="text/javascript">
window.addEventListener('load', function() {
if(/services|1800/.test(window.location.href))
{
document.getElementById('branddrop-row').style.display = 'none';
}
});
</script>
I'm trying to dynamically select an item from a dropdown menu but it doesn't seem to be working although I've been utilizing the ways people have mentioned on this forum.
This is my html:
<div>
<div class="form-group">
<label class="col-sm-4 control-label requiredLabel">TITLE</label>
<div class="col-sm-5">
<select name="selectedDialInSetting" id="selectedDialInSetting">
<option value="SIP">SIP</option>
<option value="SIPS">SIPS</option>
<option value="H323">H323</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" name="sipOrH323DialIn" id="sipOrH323DialIn" value="{{sipOrH323DialIn}}">
</div>
</div>
</div>
And here is how I'm attempting to change it:
$("#selectedDialInSetting").val("H323").change();
$("#sipOrH323DialIn").val("hello) // this gets set correctly
Edit: Trying to use $('#selectedDialInSetting option[value="H323"]').prop('selected', true); now
I would appreciate any insight!
Thanks
Try this: $('#selectedDialInSetting option[value="H323"]').prop('selected', true);
edit: we found the problem, the ID was being changed after page load so #selectedDialInSetting wasn't targeting correctly.
How about this?
$(document).ready(function(){
$("#selectedDialInSetting").change(function(){
$("#sipOrH323DialIn").val($("#selectedDialInSetting").val())
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="form-group">
<label class="col-sm-4 control-label requiredLabel">TITLE</label>
<div class="col-sm-5">
<select name="selectedDialInSetting" id="selectedDialInSetting">
<option value="SIP">SIP</option>
<option value="SIPS">SIPS</option>
<option value="H323">H323</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-5">
<input type="text" class="form-control" name="sipOrH323DialIn" id="sipOrH323DialIn" value="">
</div>
</div>
</div>
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 */ }
);
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.