<label>Mark All Present:</label>
<input type="checkbox" name="checkall" ng-model="checkall">
<select name="status{{$index}}" ng-model="attendance_data[$index].status" required>
<option value="">Select Status</option>
<option value="Present" data-ng-selected="checkall">Present</option>
<option value="Late">Late</option>
<option value="Absent">Absent</option>
</select>
<span ng-show="submitted && attendance_form.status{{$index}}.$error.required">is Required</span>
On click on checkbox value selected as present,
but at the time of submission it shows is Required.
If i selected value with mouse on by one its working.
Quick look at the ngSelected documentation: Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
You should update your checkbox to set the select model value appropriately on ngChange.
Related
I have following code for my dropdown menu. How can I set a value as selected?
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein">nein</option>
</select>
</div>
I thought it will be selected if I type in the selected keyword? Why does angular not do this?
I think this work for you:
Use selected in the <option> tag
<div class="input-group mb-3">
<label class="input-group-text labelDropDown" for="inputGroupSelect01">Art der
Integration</label>
<select class="form-select" id="inputGroupSelect01" formControlName="integrationType">
<option value="statisch">statisch</option>
<option value="dynamisch">dynamisch</option>
<option value="nein" selected>nein</option>
</select>
</div>
Selected is an boolean parameter from the HTML Element select
so you have set it to true for the specific option element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
Alternative Solutions:
use selectedHTMLEl.selectedIndex
sets the selected Option by the Index of Option
The selected value is defined by the formControl you bound it to. Once you give the FormControl integrationType a value, this value will be selected. If you set nein as it's value, the 3rd option neinwill be selected.
Example edit value after init
this.myFormGroup.get('integrationType').setValue('nein');
Example with value on init
this.myFormGroup = this.formBuilder.group({
integrationType: ['nein'],
});
<form>
<div class="form-group">
<label for="sel1 primary"></label>
<select class="form-control" id="sel1">
<option *ngFor="let group of instanceList"(click)="change_group(group.name)" > {{group.name}}
</option>
</select>
</div>
</form>
Sorry for bad indentation.
Instancelist list is the array of object contain, id, name, groupnumber.
I want to get the value of selected option in my calling method and want to display it in console.
function change_group(groupname){
this.change_to=groupname;
console.log(change_to);
}
The problem is, the given function not even call upon selecting value in dropdown.
Why not leave the option tags alone and just subscribe to the selection changed event in the <select> tag
<select class="form-control" id="sel1" (change)="onGroupChange($event)">
(click) on <option> is usually not how to do it.
Use instead ngModel
<select class="form-control" id="sel1" ngModel (ngModelChange)="change_group($event)">
<option *ngFor="let group of instanceList" [ngValue]="group"> {{group.name}}
</option>
<select name="status" required>
<option selected disabled>status</option>
I have set required attribute in html select.
My first option set selected disabled for display text.
However it will cause required attribute not working.
anyone know how to solve this problem?
Set <option>'s value to empty string ('').
Updated Code
<select name="status" required>
<option selected disabled value="">status</option>
<!-- Additional options here (at least one should not be disabled) -->
</select>
Explanation
select will return the value of the selected option to the server when the user presses submit on the form. An empty value is the same as an empty text input → raising the required message.
More info (w3schools)
The value attribute specifies the value to be sent to a server when a form is submitted.
Example
document.querySelector('form').onsubmit = (e) => {
e.preventDefault();
const status = e.target[0].value;
console.log(`Your status is: "${status}"`);
}
<form>
<select name="status" required>
<option selected disabled value="">Select a status...</option>
<option value="Good">Good</option>
<option value="Bad">Bad</option>
</select>
<input type="submit" value="Submit">
</form>
Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value
I have the following HTML on my page, where I have 2 select elements. I want them both to be required. I want the second element currentModel to remain disabled until the first one is selected with a value other than Year, which is my default value.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option>Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Could somebody help me with how to validate the select elements like this?
All you need to use is ng-model and ng-options instead of manually creating options via ng-repeat. Let angular create options for you.
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear"
ng-options="year for year in years track by year">
<option value="">Year</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="!currentYear"
ng-options ="model.niceName as model.name for model in models track by model.niceName">
<option value="">Model</option>
</select>
Plnkr
ng-options="year for year in years track by year" follows the syntax label for value in array
ng-options ="model.niceName as model.name for model in models track by model.niceName" follows the syntax select as label for value in array
Just set the ng-model for both the selects. In case of models since i used select as syntax (model.niceName as model.name) the currentModel will have niceName property of the selected item. if you remove select as part from the model it will have the respective model object.
set an ng-disabled on the 2nd select based on value of currentModel
since there is a track by bug with ng-select when dealing with objects we need to go with as syntax
ng-disabled="currentYear == -1" select your default value by doing $scope.currentYear = -1
This will make the second select box disabled if the currentYear model value is '-1'
<select class="form-control input-xsmall select-inline" data-ng-model="currentYear" >
<option value="-1">Year</option>
<option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>
<select class="form-control input-xsmall select-inline" data-ng-model="currentModel"
ng-disabled="currentYear == 'Year'">
<option>Model</option>
<option ng-repeat="model in models" value="{{model.niceName}}">{{model.name}}</option>
</select>
Here is Plunkr example: http://plnkr.co/edit/LIAqMq4TEz9xOCUGPAUs?p=preview