Angular not validating form select

Question

I'm new to angular so bear with me. I have a form with a dropdown, textbox and a button. The user has to select an option from the dropbox and enter a value in the textbox before the form becomes valid.

<form name='personDataSourceForm' novalidate ng-submit='personDataSourceForm.$valid && PersonCtrl.SaveDataItem()'>
    <span>Invalid: {{personDataSourceForm.$invalid}}</span><br />
    <span>valid: {{personDataSourceForm.$valid}}</span>
    <div class="input-group">
        <div class="input-group-addon">
            <select class="form-control input-sm" required ng-model='PersonCtrl.sp.person.newItem.dataType' ng-options='opt as opt.text group by opt.dataType for opt in PersonCtrl.DataItemTypes'>
                <option value="" disabled selected>Choose...</option>
            </select>
        </div>
        <input type="text" class="form-control input-sm" ng-model='PersonCtrl.sp.person.newItem.value' required>
        <div class="input-group-btn">
            <button class="btn btn-default btn-sm" ng-class="{ 'btn-success' : PersonCtrl.sp.person.newItem.dataType.dataType && PersonCtrl.sp.person.newItem.value }" type="submit">Save</button>
            <button class="btn btn-link btn-sm" type="button" ng-click="PersonCtrl.StopAddItem()">Cancel</button></div>
    </div>
</form>

I quickly added 2 spans to show the validation state. When both are empty the form shows invalid which makes sense.

As soon as I type in a value in the textbox then suddenly the form is valid even though the dropdown still hasn't been changed. Why is my dropdown not getting validated? I've even tried this solution AngularJS Dropdown required validation

not really able to reproduce your issue. Can you reproduce the same problem in a fiddle and share? — Binod Gurung, Jan 17 '17 at 21:36
edit: problem seems to be solved when I changed `selected` to `ng-selected="selected"`. Still trying to understand why.. — john, Jan 17 '17 at 21:40
ng-selected = "selected" is like removing selected from your option since the variable `selected` will be resolved to `false` if you don't have it in scope. — Binod Gurung, Jan 17 '17 at 21:48
thanks. I'm still trying to wrap my head around this. So if I want to make sure the user selects something other than the first default option then I can just leave `ng-selected` in there and it should always return false if nothing is selected? — john, Jan 17 '17 at 21:57
as long as you have the value="" for your option your form should be invalid if user selects that option. So better to use it like ``. — Binod Gurung, Jan 17 '17 at 22:06

score 0 · Answer 1 · answered Jan 17 '17 at 21:07

0

My initial thought is that you already have that default value selected:

<option value="" selected>Choose...</option>

so it does technically have a value of "", which is fulfilling the required.

answered Jan 17 '17 at 21:07

firassasin

1

updating my code I posted to what I tested with, but that doesn't work either – john Jan 17 '17 at 21:11

score 0 · Answer 2 · answered Jan 17 '17 at 22:36

I think you will need to look at PersonCtrl.sp.person.newItem. The form becomes valid when both the dataType and value get solid. My guess is the item always has its dataType solid and valid so when the new value is entered the whole form becomes valid.

score 0 · Answer 3 · answered Jan 18 '17 at 02:19

Why don't your select ad input have a name attribute? The name attribute is necessary for form validations to work properly. I think form creates a map of name->validity for each input component and it could be that you have omitted it they both (select and input) map to the same validity object. If this is the case, then anyone becomes valid, effectively makes the status of the other one valid as well and hence they are both valid the form becomes valid. Please add separate names for them and see if the problem is resolved. My opinion above is a strong guess and I have not dived into Angular code to check ng-form's behaviour.

I tried it even with a name attribute but it didn't want to work and I couldn't figure it out. What ended up working was using `ng-select` — john, Jan 18 '17 at 14:06

Angular not validating form select

3 Answers3