input: label does not exist when 'required' attribute changes, throws "Cannot read property 'toggleClass' of null"

[dbarnespaychex]

Actual Behavior:

• What is the issue? *
  Angular material tries to toggle the "required" CSS class on a label when an input's bound required value changes, without checking if the label still exists.
• What is the expected behavior?
  Because material labels remove themselves from the inputContainer when their scope is destroyed, the associated material input needs to verify the label member is still defined on the inputContainer before attempting to access its toggleClass member.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://codepen.io/dbarnespaychex/pen/YxGgEw?editors=1111
• Details:
  There actually appear to be 2 issues, but the one that we're seeing is Cannot read property 'toggleClass' of null. Check out https://github.com/angular/material/blob/master/src/components/input/input.js#L168 and https://github.com/angular/material/blob/master/src/components/input/input.js#L418.

The bug is in setupAttributeWatchers:

    function setupAttributeWatchers() {
      if (containerCtrl.label) { // <-- you make sure label exists here
        attr.$observe('required', function (value) {
          // but inside your observer callback you assume label still exists;
          // need to add a guard to ensure containerCtrl.label still exists:
          containerCtrl.label.toggleClass('md-required', value && !mdNoAsterisk);
        });
      }
    }

AngularJS Versions: *

• AngularJS Version: n/a
• AngularJS Material Version: 1.1.1+

Additional Information:

• Browser Type: * n/a
• Browser Version: * n/a
• OS: * n/a
• Stack Traces:

TypeError: Cannot read property 'toggleClass' of null
    at https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js:10:5119
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:86:132
    at m.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:107)
    at m.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:142:173)
    at m.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:145:401)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:138:202
    at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:45:350)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js:48:275

[dbarnespaychex]

BTW, I understand the CodePen seems like an unusual use case. This isn't how our code is written -- it's just the simplest reproducible example I could come up with. Our organization wrote some complex form input extensions, and there appears to be a timing issue between tearing down a certain tab controller and changing the 'required' value of an input element. Unfortunately, I don't believe we can prevent this issue in our code -- it has to be fixed within angular-material.

[Splaktar]

Thank you for this report. I was able to reproduce the issue in an updated CodePen.