diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html
index 583d6b952857..7586adfca69b 100644
--- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html
+++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html
@@ -1,8 +1,8 @@
-
- Phone number
-
- phone
- Include area code
-
+
+ Phone number
+
+ phone
+ Include area code
+
diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
index 2b7d5cefff32..d45dcd600a73 100644
--- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
@@ -63,7 +63,6 @@ export class MyTelInput
parts: FormGroup;
stateChanges = new Subject();
focused = false;
- errorState = false;
controlType = 'example-tel-input';
id = `example-tel-input-${MyTelInput.nextId++}`;
describedBy = '';
@@ -129,6 +128,10 @@ export class MyTelInput
this.stateChanges.next();
}
+ get errorState(): boolean {
+ return this.parts.invalid && this.parts.dirty;
+ }
+
constructor(
formBuilder: FormBuilder,
private _focusMonitor: FocusMonitor,
@@ -185,7 +188,7 @@ export class MyTelInput
this.describedBy = ids.join(' ');
}
- onContainerClick(event: MouseEvent) {
+ onContainerClick() {
if (this.parts.controls.subscriber.valid) {
this._focusMonitor.focusVia(this.subscriberInput, 'program');
} else if (this.parts.controls.exchange.valid) {