[MdInput] Cannot read property 'invalid' of null

[simpulton]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

We are using dynamically generating forms for a line of business application and when we added in Angular Material the form elements would throw an error when being added to the page.

The error is as follows

ERROR TypeError: Cannot read property 'invalid' of null
   at MdInput.defaultErrorStateMatcher [as errorStateMatcher] (material.es5.js:2420)
   at MdInput.webpackJsonp.../../../material/@angular/material.es5.js.MdInput._updateErrorState

We were able to fix it by changing the defaultErrorStateMatcher method in material.es5.js to also check for the presence of control before performing additional verifications.

function defaultErrorStateMatcher(control, form) {
  var /** @type {?} */ isSubmitted = form && form.submitted;
  return !!(control && control.invalid && (control.touched || isSubmitted));
} 

What is the current behavior?

The error above is thrown.

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.

Plunker starter (using on @master): https://goo.gl/DlHd6U

StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

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

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Our versions are as follows

    "@angular/animations": "^4.3.0",
    "@angular/cdk": "^2.0.0-beta.10",
    "@angular/common": "^4.3.0",
    "@angular/compiler": "^4.3.0",
    "@angular/compiler-cli": "^4.3.0",
    "@angular/core": "^4.3.0",
    "@angular/flex-layout": "^2.0.0-beta.9",
    "@angular/forms": "^4.3.0",
    "@angular/http": "^4.3.0",
    "@angular/material": "^2.0.0-beta.10",
    "@angular/platform-browser": "^4.3.0",
    "@angular/platform-browser-dynamic": "^4.3.0",
    "@angular/platform-server": "^4.3.0",
    "@angular/router": "^4.3.0",
    "@types/file-saver": "0.0.0",

and

    "@angular/cli": "^1.3.1",
    "@angular/compiler-cli": "^2.4.0",
    ...
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.3.2"

Is there anything else we should know?

[willshowell]

It looks like defaultErrorStateMatcher should only ever be called if there is an NgControl. Dunno why ngControl.control would be null.

https://github.com/angular/material2/blob/53c42a45ca9c0c57609bcfc66446f64dec28058f/src/lib/input/input.ts#L191-L202

https://github.com/angular/material2/blob/53c42a45ca9c0c57609bcfc66446f64dec28058f/src/lib/input/input.ts#L224-L235

@simpulton FWIW, you can provide a custom error matcher locally or globally as a workaround.

[Dragomir-Ivanov]

Hi There,
I am getting similar error with "@angular/material": "^2.0.0-beta.8"
Getting this error when delete FormArray entry that is not the last one.

If I start deleting from the end of a FormArray with removeAt method, I get no errors, however I start deleting form element that is not the last I get this:

 TypeError: Cannot read property 'invalid' of null
    at MdInputDirective.defaultErrorStateMatcher [as errorStateMatcher] (material.es5.js:4536)
    at MdInputDirective.webpackJsonp.../../../material/@angular/material.es5.js.MdInputDirective._isErrorState (material.es5.js:13521)
    at Object.eval [as updateRenderer] (TelephoneListComponent.ngfactory.js:216)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13096)
    at checkAndUpdateView (core.es5.js:12243)
    at callViewAction (core.es5.js:12603)
    at execEmbeddedViewsAction (core.es5.js:12561)
    at checkAndUpdateView (core.es5.js:12239)
    at callViewAction (core.es5.js:12603)
    at execComponentViewsAction (core.es5.js:12535)

I have MdInput attached to FormArray->FormGroup->element

[Dragomir-Ivanov]

Making the change above, fixed my issue as well.

function defaultErrorStateMatcher(control, form) {
  var /** @type {?} */ isSubmitted = form && form.submitted;
  return !!(control && control.invalid && (control.touched || isSubmitted));
} 

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}