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
– Binod Gurung, Commented Jan 17, 2017 at 21:36
edit: problem seems to be solved when I changed selected to ng-selected="selected". Still trying to understand why.. — john
– john, Commented Jan 17, 2017 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
– Binod Gurung, Commented Jan 17, 2017 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
– john, Commented Jan 17, 2017 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 <option value="" default>Choose...</option>. — Binod Gurung
– Binod Gurung, Commented Jan 17, 2017 at 22:06

firassasin · Accepted Answer · 2017-01-17 21:07:53Z

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, 2017 at 21:07

firassasin

1

Sign up to request clarification or add additional context in comments.

1 Comment

john Over a year ago

updating my code I posted to what I tested with, but that doesn't work either

Coding Pig · Accepted Answer · 2017-01-17 22:36:21Z

0

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.

answered Jan 17, 2017 at 22:36

Coding Pig

665 bronze badges

Comments

Ali Motevallian · Accepted Answer · 2017-01-18 02:19:39Z

0

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.

answered Jan 18, 2017 at 2:19

Ali Motevallian

1,41211 silver badges15 bronze badges

1 Comment

john Over a year ago

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

Collectives™ on Stack Overflow

Angular not validating form select

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related