Skip to content

Commit ce3926d

Browse files
swseverancemmalerba
authored andcommittedFeb 4, 2019
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
1 parent 39ce618 commit ce3926d

File tree

2 files changed

+5
-12
lines changed

2 files changed

+5
-12
lines changed
 

‎guides/creating-a-custom-form-field-control.md

+4-12
Original file line numberDiff line numberDiff line change
@@ -307,22 +307,14 @@ make up our component.
307307

308308
```ts
309309
@Input()
310-
get disabled() {
311-
return this._disabled;
312-
}
313-
set disabled(dis) {
314-
this._disabled = coerceBooleanProperty(dis);
310+
get disabled(): boolean { return this._disabled; }
311+
set disabled(value: boolean) {
312+
this._disabled = coerceBooleanProperty(value);
313+
this._disabled ? this.parts.disable() : this.parts.enable();
315314
this.stateChanges.next();
316315
}
317316
private _disabled = false;
318317
```
319-
```html
320-
<input class="area" formControlName="area" size="3" [disabled]="disabled">
321-
<span>&ndash;</span>
322-
<input class="exchange" formControlName="exchange" size="3" [disabled]="disabled">
323-
<span>&ndash;</span>
324-
<input class="subscriber" formControlName="subscriber" size="4" [disabled]="disabled">
325-
```
326318

327319
#### `errorState`
328320

‎src/material-examples/form-field-custom-control/form-field-custom-control-example.ts

+1
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
7070
get disabled(): boolean { return this._disabled; }
7171
set disabled(value: boolean) {
7272
this._disabled = coerceBooleanProperty(value);
73+
this._disabled ? this.parts.disable() : this.parts.enable();
7374
this.stateChanges.next();
7475
}
7576
private _disabled = false;

0 commit comments

Comments
 (0)
Please sign in to comment.