CODEWITHSUNDEEP
javascriptformsangularjsvalidation
Sander Verhagen
Sander Verhagen

Reputation: 9118

AngularJS SELECT doesn't validate properly

This is an AngularJS application (1.2.16). I browse to a dialog to edit some item. One of the controls is a multi-SELECT with the following visible values:

incident
work order

These visible values correspond to the following data values:

INCIDENT
WORK_ORDER

This is done through using the ng-options=" ... as ... for ... in ... " pattern, using an enumeration:

var FlexFieldSubjectTypeEnum = {
    INCIDENT:{name:"INCIDENT", description:"incident"},
    WORK_ORDER:{name:"WORK_ORDER", description:"work order"}
}

If have a form pretty much as follows:

<form ng-submit="save(formName)" name="formName" class="form-horizontal">

  ...

    <div class="control-group">
        <label class="control-label">Subject type:</label>
        <div class="controls">
            <select name="subjectType"
                ng-options="type.name as type.description for type in getEnumAsArray('FlexFieldSubjectTypeEnum') | orderBy:'name'"
                ng-model="entity.subjectType"
                required></select>
        </div>
    </div>

Now, if the dialog loads the item ($scope.entity) from the backend and entity.subjectType is set to the first item in the list, the form validation marks it as unset. I have many other dialogs with similar constructs and have not seen this problem anywhere else.

enter image description here

If the item returned from the backend points to the second item (WORK_ORDER), this is nicely represented in the SELECT ("work order") and there is no validation error.

The problem does exist equally when using required or ng-required="true".

The problem does not exist if I remove the required attribute, but then the field also suddenly becomes optional, which is not what I wanted.

Your help much appreciated!

Upvotes: 1

Views: 168

Answers (1)

Sander Verhagen
Sander Verhagen

Reputation: 9118

Almost a month later, with meanwhile an upgrade from Bootstrap v2.2.2 to v3.1.1 the problem disappeared.

Upvotes: 1

Related Questions