skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(examples): fix form-field custom control disabled input (#14957)

Browse Source 
* 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
This commit is contained in:
swseverance
2019-01-28 19:08:47 -05:00
committed by mmalerba
parent 65730d3077
commit 17fcb373e0
2 changed files with 5 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
guides/creating-a-custom-form-field-control.md
+4 -12
View File
@@ -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`
src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+1
View File
@@ -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;