From 17fcb373e055d1df97841bc05034aa33567e9d96 Mon Sep 17 00:00:00 2001
From: swseverance <swseverance@gmail.com>
Date: Mon, 28 Jan 2019 19:08:47 -0500
Subject: [PATCH] fix(examples): fix form-field custom control `disabled` input
 (#14957)

* fixes form-field custom control example and guide so as not to attempt
  to use the `disabled` attribute on an input element that has a reactive
  form directive. see: https://github.com/angular/angular/blob/e2c98fbe11272295c3827b0e54f859d283cd32bf/packages/forms/src/directives/reactive_errors.ts#L64
---
 guides/creating-a-custom-form-field-control.md   | 16 ++++------------
 .../form-field-custom-control-example.ts         |  1 +
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/guides/creating-a-custom-form-field-control.md b/guides/creating-a-custom-form-field-control.md
index 4d5f219317a..a6d3d8f98bd 100644
--- a/guides/creating-a-custom-form-field-control.md
+++ b/guides/creating-a-custom-form-field-control.md
@@ -307,22 +307,14 @@ make up our component.
 
 ```ts
 @Input()
-get disabled() {
-  return this._disabled;
-}
-set disabled(dis) {
-  this._disabled = coerceBooleanProperty(dis);
+get disabled(): boolean { return this._disabled; }
+set disabled(value: boolean) {
+  this._disabled = coerceBooleanProperty(value);
+  this._disabled ? this.parts.disable() : this.parts.enable();
   this.stateChanges.next();
 }
 private _disabled = false;
 ```
-```html
-<input class="area" formControlName="area" size="3" [disabled]="disabled">
-<span>&ndash;</span>
-<input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
-<span>&ndash;</span>
-<input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
-```
 
 #### `errorState`
 
diff --git a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
index 27ba34b0af7..60ef21b5e65 100644
--- a/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
@@ -70,6 +70,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   get disabled(): boolean { return this._disabled; }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
+    this._disabled ? this.parts.disable() : this.parts.enable();
     this.stateChanges.next();
   }
   private _disabled = false;