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.
Related
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.
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
I am using ASP.NET core MVC6 so I'm using a select taghelper for the dropdown. This all works and I have a dropdown with states. As can be seen below there is a selected state.
In Javascript I wanted to get the selected value of this dropdown. I tried each of these:
var getSelectedState1 = function () {
return $State.val;
};
var getSelectedState2 = function () {
return $("#State").val;
};
..and both returned empty strings.
As "State" is the element ID of the state select element which I've identified both from Dave Paquette's blog and also from the page source...
<div class="form-group">
<label class="col-md-2 control-label" for="State">State:</label>
<div class="col-md-10">
<select class="form-control" data-val="true" data-val-required="A State name is required" id="State" name="State"><option value="NSW">New South Wales</option>
<option selected="selected" value="VIC">Victoria</option>
<option value="QLD">Queensland</option>
<option value="SA">South Australia</option>
<option value="WA">Western Australia</option>
<option value="TAS">Tasmania</option>
<option value="NT">Nothern Territory</option>
<option value="ACT">Australian Captial Territory</option>
</select>
<span class="text-danger field-validation-valid" data-valmsg-for="State" data-valmsg-replace="true" />
</div>
eg id="State".
Using a breakpoint and checking the value of "getSelectedState" I get an empty return for both attempts.
How do I populate a variable "getSelectedState" with the selected value of the dropdown using a function?
Note: Whilst this is aimed at Javascript people the problem might be in relation to the fact that its an MVC6 Taghelper element and I'm not accessing it correctly - this might be why its returning "" and not the javascript.
i have a conditional field like this :
<form ng-app="myApp" name="frm">
<select ng-model="NewBranchRequest.BranchTypeCode">
<option selected="selected" value="0">third</option>
<option value="1">first</option>
<option value="2">second</option>
</select>
<input class="ng-pristine ng-valid" type="text" name="power" ng-model="NewBranchRequest.PwrCnt" placeholder="sad" ng-required="NewBranchRequest.BranchTypeCode==0">
<span style="color:red" ng-show="frm.power.$invalid">
*
</span>
<button>Submit</button>
</form>
Demo
it works, but option fill from server and it doesn't work.
UPDATE
Check This Demo which is not working .
All i want is after select Bug in select list, input get rquired .
Any idea ?
In http://jsfiddle.net/sadeghbayan/MTfRD/1452/
change
ng-required="form.type==0"
to
ng-required="form.type=='bug'"
I made the changes here: http://jsfiddle.net/MTfRD/1453/
In addition, if you want to get the json object in form.type you can change this
ng-options='option.value as option.name for option in typeOptions'
to
ng-options='option.value for option in typeOptions'
I have this form here:
<form action="listasearch.php" method="get">
<select name="kategoria">
<option value="klienti">Klienti</option>
<option value="id">ID</option>
<option value="dyqani_pergjegjes">Dyqani Përgjegjës</option>
<option value="emri">Emri</option>
</select>
</form>
The issue is, i need to keep the selected value, I would do it if i had two similar names, i.e
dyqani_pergjegjes and dyqani_pergjegjes, but it's Dyqani Pergjegjes then.
Someone please could help me with this?
Thanks
var select=document.getElementsByName("kategoria");
for(var i=0;i<select[0].options.length;i++){
if(select[0].options[i].text=="Dyqani Përgjegjës")
// if(select[0].options[i].value=="dyqani_pergjegjes") //or
select[0].selectedIndex=i;
}