required directive not working on select tag in Angular

175 Views Asked by At

I have a form will multiple fields that have the required directive attached like so:

<input type="text" name="city" placeholder="Business City" data-ng-model="$ctrl.formData.city" required>

All are working except the select dropdown. I have it so default text displays, prompting users to select from the drop-down. Though the form comes back as valid, even when the user hasn't selected an option from the dropdown. Here is the select html.

<select name="timezone" id="timezone" class="form-control font-body pill-radius"
    data-ng-model="$ctrl.formData.timezone"
    data-ng-options="zone.abbr for zone in $ctrl.ustimezones"
    required>
    <option value="" disabled selected>Select timezone</option>
</select>

Question

Why is the required directive not being detected, thus resulting in the form being valid, allowing the user to submit? I have tried ng-required="true" and I am getting the same issue.

0

There are 0 best solutions below