Ionic Select Dropdown Validation Issue

ionic-v1
1

Is there a way we can have the dropdown value update while the user selects it? (instead of requiring the user to tap off or click “done”)

image
dropdown.png745×1214 54.3 KB

DOM:

<div class="row">
			<div class="col">
				<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine}">
					<div class="input-label">Location</div>
					<select id="location" name="location" ng-init="postData.location=''" ng-disabled="subForm.date.$pristine" ng-model="postData.location" required>
						<option value="" disabled hidden></option>
						<option value="Denver Office">Denver Office</option>
						<option value="DJ Basin">DJ Basin</option>
						<option value="East Mediterranean">East Mediterranean</option>
						<option value="Gulf of Mexico">Gulf of Mexico</option>
						<option value="Houston Office">Houston Office</option>
						<option value="Marcellus">Marcellus</option>
						<option value="Texas">Texas</option>
						<option value="West Africa">West Africa</option>
						<option value="Other">Other</option>
					</select>
				</label>
			</div>
			</div>

			<div class="row">
			<div class="col">
				<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine || subForm.location.$pristine}">
					<div class="input-label">Observation</div>
					<select id="observationList" name="observationList" ng-disabled="subForm.date.$pristine || subForm.location.$pristine" ng-model="postData.category" required>
            <option value="" disabled hidden></option>
						<option value="Caught Between">Caught Between</option>
						<option value="Dropped Object">Dropped Object</option>
						<option value="Fall from Height">Fall from Height</option>
						<option value="Personal Protective Equipment (PPE)">Personal Protective Equipment (PPE)</option>
						<option value="Slip / Trip / Fall">Slip / Trip / Fall</option>
						<option value="Strain / Overexertion">Strain / Overexertion</option>
						<option value="Struck by">Struck by</option>
						<option value="Spill / Release">Spill / Release</option>
						<option value="Safe Work Practices">Safe Work Practices</option>
						<option value="NO HARM">No Harm</option>
						<option value="Other">Other</option>
					</select>
				</label>
			</div>
			</div>

I have step-by-step validation and would like for the user to be able to move to the next step as soon as they choose a value in the dropdown list. $pristine and $untouched do not check until the control loses focus.

2

Yes, you can use ng-change on the select:

<select ng-model="yourModel" ng-change="function(yourModel)">
4

This actually does not work. ng-change will not fire until the dropdown loses focus.

Test Example:

{{ dropDownChanged }}
<select id="location" name="location" ng-change="dropDownChanged = dropDownChanged + 1">

The value does not update until I click “Done” or click off of the dropdown.