Material: select(multiple): if ng-required, model is undefined when all options are unselected

[papb]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

An md-select multiple should yield [] instead of undefined when nothing is selected.

What is the current behavior?

Take a md-select with the options multiple and ng-required: after selecting and then de-selecting an item, the model value becomes undefined instead of [].

N.B.: The ng-required="true" is essential, without it the bug does not happen.

CodePen and steps to reproduce the issue:

CodePen Demo which shows your issue: MVpKGB

Detailed Reproduction Steps: Open the CodePen and open the developer console. Whenever a change happens to the model value of the select, the value will be logged to console. Select something in the md-select. You will see it being logged as an array of 1 element. Now unselect that. Instead of logging [], we get undefined in the console.

What is the use-case or motivation for changing an existing behavior?

The ng-model of an md-select should always be an array. It is awful to have to create code guards around $scope.myModel.some() or $scope.myModel.forEach() just because the model could be undefined.

Which versions of AngularJS, Material, OS, and browsers are affected?

Tested within Chrome 56.0.2924.87 (64-bit) and Firefox 52.6.0 (64-bit), in windows. Tested with Material 1.1.0 and 1.1.8. Tested with AngularJS 1.5.5 and 1.6.9. I am almost sure this is a direct issue with material though, not AngularJS, browser or OS.

Is there anything else we should know? Stack Traces, Screenshots, etc.

When fixing this bug, ensure that this fix does not cause a regression to issue #4604.

[feloy]

I can look at this bug

[feloy]

Here is another codepen reproducing the bug: https://codepen.io/feloy/pen/OvjKeL (the one in the ddescription is not loading for me)

[feloy]

It seems to me that this behavior is normal.

The NgModelController.$validate() API (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$validate) indicates that, when the validity is invalid (this is the case due to the "required" validator), the model is set to undefined unless you use ng-model-options="{ allowInvalid: true }" on your md-select element.

Or should we consider that an empty selection for a multiple select is acceptable for a required validator?

[papb]

Oh, my sincere apologies. I didn't know that. Looks like this is indeed the correct behavior. I will be using ng-model-options="{ allowInvalid: true }" on all my md-selects for now on, since I very much prefer it to be [] rather than undefined.

As for your last question,

Or should we consider that an empty selection for a multiple select is acceptable for a required validato?

No, I think it should be left as-is. I think the most intuitive behavior is that a required multiple select should have at least one element selected to be valid. In fact, this wasn't the case in the past, and an issue was opened to change it (#4604).

Summarizing, looks like this was a mistake by me - I didn't know that when the validity is invalid, the model is set to undefined, thanks for teaching and apologies for not proof-reading the docs.

Thanks for taking the time :grinning:

The issue can be considered solved.

[Splaktar]

@feloy thank you very much for looking into this! I wasn't aware of allowInvalid either, good to know!