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 (#15147)

Browse Source 
* Update `MyTelInput` to implement `ControlValueAccessor` interface
* Resolves #14810
This commit is contained in:
swseverance
2019-02-22 13:29:06 -05:00
committed by Jeremy Elbourn
parent 0bf7ccbde8
commit 83135e1c62
2 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/material-examples/form-field-custom-control/example-tel-input-example.html
+3 -3
View File
@@ -1,7 +1,7 @@
<div [formGroup]="parts" class="example-tel-input-container">
<input class="example-tel-input-element" formControlName="area" size="3">
<input class="example-tel-input-element" formControlName="area" size="3" (input)="_handleInput()">
<span class="example-tel-input-spacer">&ndash;</span>
<input class="example-tel-input-element" formControlName="exchange" size="3">
<input class="example-tel-input-element" formControlName="exchange" size="3" (input)="_handleInput()">
<span class="example-tel-input-spacer">&ndash;</span>
<input class="example-tel-input-element" formControlName="subscriber" size="4">
<input class="example-tel-input-element" formControlName="subscriber" size="4" (input)="_handleInput()">
</div>
src/material-examples/form-field-custom-control/form-field-custom-control-example.ts
+38 -5
View File
@@ -1,7 +1,7 @@
import {FocusMonitor} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {Component, ElementRef, Input, OnDestroy} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
import {FormBuilder, FormGroup, ControlValueAccessor, NgControl} from '@angular/forms';
import {MatFormFieldControl} from '@angular/material';
import {Subject} from 'rxjs';
@@ -30,17 +30,18 @@ export class MyTel {
'[attr.aria-describedby]': 'describedBy',
}
})
export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
static nextId = 0;
parts: FormGroup;
stateChanges = new Subject<void>();
focused = false;
ngControl = null;
errorState = false;
controlType = 'example-tel-input';
id = `example-tel-input-${MyTelInput.nextId++}`;
describedBy = '';
onChange = (_: any) => {};
onTouched = () => {};
get empty() {
const {value: {area, exchange, subscriber}} = this.parts;
@@ -89,7 +90,12 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
this.stateChanges.next();
}
constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
constructor(
fb: FormBuilder,
private fm: FocusMonitor,
private elRef: ElementRef<HTMLElement>,
@Optional() @Self() public ngControl: NgControl) {
this.parts = fb.group({
area: '',
exchange: '',
@@ -97,9 +103,16 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
});
fm.monitor(elRef, true).subscribe(origin => {
if (this.focused && !origin) {
this.onTouched();
}
this.focused = !!origin;
this.stateChanges.next();
});
if (this.ngControl != null) {
this.ngControl.valueAccessor = this;
}
}
ngOnDestroy() {
@@ -116,4 +129,24 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
this.elRef.nativeElement.querySelector('input')!.focus();
}
}
writeValue(tel: MyTel | null): void {
this.value = tel;
}
registerOnChange(fn: any): void {
this.onChange = fn;
}
registerOnTouched(fn: any): void {
this.onTouched = fn;
}
setDisabledState(isDisabled: boolean): void {
this.disabled = isDisabled;
}
_handleInput(): void {
this.onChange(this.parts.value);
}
}