Stackblitz in documentation for "Creating a custom form field control" is showing an error.

[StephenWTurner]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Stackblits demo of "Creating a custom form field control" should load.

What is the current behavior?

Error displayed:

Error occurred:
Cannot read property 'match' of undefined
Instantiating app/form-field-custom-control-example.html
Loading app/form-field-custom-control-example.ts
Loading main.ts
Loading blitzapp

What are the steps to reproduce?

Goto documentation at https://material.angular.io/guide/creating-a-custom-form-field-control
Click the link to Stackblitz in the first example at https://stackblitz.com/angular/yjpjxdonleyy?file=app%2Fform-field-custom-control-example.ts

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

n/a

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

Found on Chrome Version 68.0.3440.106 (Official Build) (64-bit)
Verified on Internet Explorer 11.0.9600.19080 / 11.0.70
I've just updated, the problem persists in Chrome Version 69.0.3497.81 (Official Build) (64-bit)

Is there anything else we should know?

Console shows error as

preview-1f727e0cbae2a3ba41a0a.js:1 Error: Cannot read property 'match' of undefined
Instantiating https://angular-29ggpg.stackblitz.io/tmp/appfiles/app/form-field-custom-control-example.html
Loading https://angular-29ggpg.stackblitz.io/tmp/appfiles/app/form-field-custom-control-example.ts
Loading https://angular-29ggpg.stackblitz.io/tmp/appfiles/main.ts
Loading blitzapp
at Ye (engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:2)
at engineblock-bc7b07e99ec5c6739c766b4898e4cff5acfddc137ccb7218377069c32731f1d0.js:1

Other stackblitz load correctly i.e. https://stackblitz.com/angular/kkljxxqvgma?file=app%2Felevation-overview-example.ts

[josephperrott]

It looks like for some reason, stackblitz is not provided with content for the form-field-custom-control-example.html file.

[StephenWTurner]

Indeed, copying the html below from the documentation example to the stackblitz /app/form-field-custom-control-example.html resolves the issue.

<div [formGroup]="parts">
  <input class="area" formControlName="area" size="3">
  <span>&ndash;</span>
  <input class="exchange" formControlName="exchange" size="3">
  <span>&ndash;</span>
  <input class="subscriber" formControlName="subscriber" size="4">
</div>

[josephperrott]

@devversion Any idea why just this html file doesn't copy over?

[devversion]

@josephperrott The problem is that we use the form-field-custom-control.html and form-field-custom-control.css files for the additional component of the custom form field example.

TL;DR: We currently use a workaround to display the contents of the form-control component in the docs. This workaround causes unexpected behavior with StackBlitz and we should just fix the actual problem and remove the workaround. See angular/material.angular.io#516

---

this is the actual primary component of the example which does inline its template
https://github.com/angular/material2/blob/7c4fa66d530eb76df79f9a4ee121ac261a157013/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts#L114-L125

this is the additional / secondary component of the example

https://github.com/angular/material2/blob/7c4fa66d530eb76df79f9a4ee121ac261a157013/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts#L14-L26

---

The problem is now that we end up having the primary example files (form-field-custom-control-example.html) as additional file as well. Meaning that it will be sent to StackBlitz twice (which results in an empty file)

'form-field-custom-control': {
  title: 'Form field with custom telephone number input control.',
  component: FormFieldCustomControlExample,
  additionalFiles: ["form-field-custom-control-example.html"],
  selectorName: 'FormFieldCustomControlExample, MyTelInput'