Skip to content
This repository has been archived by the owner on Apr 13, 2022. It is now read-only.

md-select not working properly with Angular 1.7.7 #16830

Closed
2 tasks
Mike-Bauer opened this issue Feb 8, 2019 · 8 comments · Fixed by #16836, angular-indonesia/angular.js#184 or javascript-indonesias/angular.js#138

Comments

@Mike-Bauer
Copy link

Mike-Bauer commented Feb 8, 2019

I'm submitting a ...

  • [x ] bug report
  • feature request
  • other

Current behavior:

Angular 1.7.7 results in a problem for the Angular Material md-select directive when the directive has the required attribute, has a parent with an ng-if, and the md-select's ng-model is given an initial value. The directive incorrectly flags a required error and the displayed select option shows a trailing asterisk.

Expected / new behavior:

The md-select should not flag a required error and the displayed selected option should not show an asterisk.

Minimal reproduction of the problem with instructions:

In Controller:

$scope.selectModel = 'option1';
$scope.showSelect = true;

In View:

<md-input-container ng-if='showSelect'>
  <label> Select </label>
  <md-select ng-model='selectModel' required>
    <md-option value='option1'> Option 1 </md-option>
    <md-option value='option2'> Option 2 </md-option>
  </md-select>
</md-input-container>

AngularJS version: 1.7.7

AngularJS Material version: 1.1.12

Browser: Chrome 71.0.3578.98 | Firefox 64.0.2 | Edge 42.17134.1.0

Anything else:

screen shot 02-08-19 at 02 27 pm

screen shot 02-08-19 at 02 27 pm 001

@Narretz
Copy link
Contributor

Narretz commented Feb 9, 2019

It works for me:
http://plnkr.co/edit/dP3Y4oTsbQoQ44tfqj7x?p=preview

Please provide a runnable demo, code and screenshots alone are not enough.
The example code is also incorrect: the label element is not closed.

@jmkrimm
Copy link

jmkrimm commented Feb 11, 2019

The issue appears when you add an ng-if to the md-input-container.

@Mike-Bauer
Copy link
Author

Correct, the issue does appear when you add an ng-if to the md-input-container or to a parent div as shown in this example.

http://plnkr.co/edit/71Gc7SshCFraulg5tbpx?p=preview

@Splaktar
Copy link
Member

Just in case it wasn't clear, this works fine with AngularJS 1.7.6 (demo).

This appears to have been caused by 005dd97.

@kambleaa007
Copy link
Contributor

kambleaa007 commented Feb 18, 2019

works in older version 1.7.6 causing problem in version 1.7.7
any updates on #005dd97 https://github.com/angular/angular.js/commit/005dd97255840547f0c11f4cd0ee9ec126ad1325

@Narretz
Copy link
Contributor

Narretz commented Feb 19, 2019

I'm working on a fix but in the mean time using NG-required=“true“ instead of plain required should work.

@jmkrimm
Copy link

jmkrimm commented Feb 19, 2019

Oddly enough using required="true" also works.

@Narretz
Copy link
Contributor

Narretz commented Feb 21, 2019

Yes, that is because we considered the value of the required attribute for the requirement status. However the presence of required already means that the control is required.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.