We Keep Coding

setting value of an input with jQuery doesn't work

I'm trying to set the value of a dropdown list based on another dropdown list value inside Angular and using jQuery, it works and it auto selects the wanted value but it doesn't add the value to the database after submitting. I'm sure everything is fine concerning the database connection because choosing any other selected value (for example euro in this case) is added to database.
$(document).ready(function() {
$("#country").change(function() {
var val = $(this).val();
if (val == "usa") {
$("#currency").val("dollar");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form (ngSubmit)="onSubmit()">
<select id="country" name="country">
<option value="usa">usa</option>
<option value="france">france</option>
</select>
<select id="currency" name="currency">
<option value="dollar">dollar</option>
<option value="euro">euro</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
NB: Dollar becomes selected but when submitting it's not added to database, whereas if I remove the jQuery function and choose manually the currency , it adds to the database and everything is fine .

The jQuery code seems to be good... but my question is, why are you using jQuery to update a form in Angular.
Did you evaluate use tempalte-driven or reactive forms instead? Below you can find your form written as template driven.
<form (ngSubmit)="onSubmit()">
<select id="country" name="country" (change)="onCountryChange()" [(ngModel)]="selectedCountry">
<option
*ngFor="let country of countries"
[value]="country">
{{ country }}
</option>
</select>
<select id="currency" name="currency" [(ngModel)]="selectedCurrency">
<option
*ngFor="let currency of currencies"
[value]="currency">
{{ currency }}
</option>
</select>
<button type="submit" class="btn btn-primary">submit </button>
</form>
And in this plunkr you can find the full example using template-driven form... but if I where you, I would go for the reactive form approach.

How to set value in multiple select option in FORM in AngularJS?

Hmtl:
<div class="form-group">
<label for="loaisanpham">Loại Sản Phẩm</label>
<select class="form-control" name="idLoaisp" id="idLoaisp" ng-model="idLoaisp" ng-required=true>
<option ng-repeat="loaisanpham in loaisanphams | orderBy: 'tenLoaisp'" value="{{loaisanpham.idLoaisp}}">{{loaisanpham.tenLoaisp}}</option>
</select><br>
</div>
<div class="form-group">
<label for="phuong">Phường</label>
<select class="form-control" name="idVungxa" id="idVungxa" ng-model="idVungxa" ng-required=true>
<option ng-repeat="vungxa in vungxas | orderBy: 'tenVungxa'" value="{{vungxa.idVungxa}}">{{vungxa.tenVungxa}}</option>
</select><br>
</div>
JavaScript:
document.getElementById("idLoaisp").value = track.loaisanpham.idLoaisp;
document.getElementsById("idVungxa").value = track.vungxa.idVungxa;
Just idLoaisp show value in html and idVungxa not show.
I do not understand why it is not displayed. Help me. Tks all

Assign your value to the $scope in your controller.
$scope.idVungxa = track.loaisanpham.idLoaisp;

In plain HTML5 you would set the option as "selected":
like this:
<select multiple>
<option value="a">a</option>
<option value="b" selected>b</option>
<option value="c" selected>c</option>
</select>
There might be a different way to do it in Angular, but if this helps, you can use
<option [attr.selected]="boolean" ...

Remove the attribute "value" in the html options and set the value to the model, you have ng-model="idLoaisp" and ng-model="idVungxa" in the view so I guess in your controller you have that variables to store the values of the item selected, models are double binding that means you can also set the value to that model.
$ctrl.idLoaisp = track.loaisanpham.idLoaisp
$ctrl.idVungxa = track.vungxa.idVungxa

angular js select box comes empty option at first

I am using angular 1.6.4 I want to display ages in select box so get values from controller, I use below code, but first field will come empty? please help me how to solve it
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

the first option comes empty because you did not select a ngModel. add value to ngModel and also use ng-options instead ng-repeat
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.ages = [2,3,4];
$scope.agefrom = $scope.ages[0]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<select ng-model="agefrom" name="agefrom" id="agefrom" class="select" style="width: 45%" ng-options="age as age for age in ages">
</select>
</div>

You can simply use ng-init like this
<select ng-init="agefrom = ages[0]"
ng-model="agefrom"
name="agefrom" id="agefrom" class="select"
style="width: 45%">
<option ng-repeat="age in ages" ng-value="age">{{age}}</option>
</select>

Validation for select field angular 2

I am using angular2#2.4.1 release. How would i do a validation on select field?
<div class="form-group" [class.has-error] = "schoolError">
<label class="control-label" for="lang">Select School</label>
<select class="form-control" name="school"
required #school
[(ngModel)] = "model.school">
<option value="default">Select a school</option>
<option *ngFor= "let sch of school">{{sch}}</option>
</select>
</div>
<button class="btn btn-primary"
[disabled] = "form.invalid" type="submit">Submit</button>
Basically i want to disable the button when the select field is invalid? How do i make the select field invalid when no value is selected?

You can make a boolean variable and assign to it false as default value. When user chooses any option, it will turn true.
https://plnkr.co/edit/yR5xz4h3llkxHsUQxFJB?p=preview
<div>
<select [(ngModel)]='selected'>
<option value='one'>Three</option>
<option value='two'>Two</option>
</select>
<button [disabled]='!selected && form.status == 'VALID'>click</button>
</div>
selected:boolean = false;

Try changing the value in your default option to an empty string:
<option [value]="">Select a school</option>

I run into the same kind of situation and the below snippet seems to work pretty good.
<option [ngValue]="undefined">Select a school</option>

When adding ngForm to your name for your form your validation should work. I assume that is missing, because otherwise your form validation would work as is. So the only thing you would need is to add to your formtag is the aforementioned ngForm, like so:
<form #form="ngForm">
Here's a plunker

I believe you should be able to implement a [disabled]="checkSelectFunction()" on your button and then create a function to check if no value is chosen in the select field.

I am a little late here but the one thing that worked for me was setting the properties to null in the component.
For example,
HTML:
<div class="form-group">
<label for="type">Type</label>
<select
class="form-control"
id="type"
name="type"
[(ngModel)]="appointment.typeId"
required>
<option *ngFor="let aType of types"
[value]="aType.appointmentTypeId">
{{aType.type}}
</select>
Component:
appointment : Appointment = new Appointment(null);
Where model is:
export class Appointment {
constructor(
public typeId: number
) {}
}
I hope this helps someone like me who is new to Angular

I tried to give a value to option of the select like
<select id="something" formControlName="something">
<option value="something">Something</option>
</select>
The value of the option should not be an empty - if it's empty this required field counts as invalid.

How to append a dropdown list before a button?

So I have a div that holds a dropdown list of items. I want the user to add more dropdown list's by pressing a button.
I managed this, but the problem I'm facing is that the new list gets appended after the button. I want the button to be always underneath the dropdown list.
I know that there is an option called insertBefore(), but I don't really know how to use it correctly in my case.
Oh and by the way, do you guys have any thoughts about how to give each new dropdown list a unique name? Because it is a form that I am planning on sending later on. I think I need to work with counters in my script file, but I om not sure yet.
So the HTML:
<form role="form" class="contact-form" id="contact-form" method="post">
<div class="form-group">
..not important for the question...
</div>
<div class="form-group">
<div class="controls" id="dropdown_item">
<select class="offerte_product" name="product_1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<input id="add_option" type="submit" value="Add More" onclick="return false" />
</div>
</div>
<div class="form-group">
..not important for the question...
</div>
And the script I am using is:
<script>
$(function(){
$('#add_option').on('click',function(){
var r= $('<select class="offerte_product" name="product_2"> <option value="volvo">Volvo</option> </select> ');
$("#dropdown_item").append(r);
});
});
So do I need to put insertBefore somewhere before the append(r)? I really have no clue.

Just put the button outside the div:
<div class="controls" id="dropdown_item">
<select class="offerte_product" name="product_1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
<input id="add_option" type="submit" value="Add More" onclick="return false" />
You can keep appending to the div and the button will still be below it.

I created fiddle for this question.You can create different name according to product group ID.
$(function(){
var productGroupID=1;
$('#add_option').on('click',function(){
productGroupID+=1;
var r= $('<select class="offerte_product" name=product_'+productGroupID+'> <option value="volvo">Volvo</option> </select> ');
$("#dropdown_item").append(r);
});
});
https://jsfiddle.net/ypaudyal/15jt7tLf/
But If you are posting to the server, I suggest you to use same name and collect the selected values in collection.