diff --git a/src/material-examples/form-field-custom-control/example-tel-input-example.html b/src/material-examples/form-field-custom-control/example-tel-input-example.html
index c38f74f4e83..fa95afcd4ba 100644
--- a/src/material-examples/form-field-custom-control/example-tel-input-example.html
+++ b/src/material-examples/form-field-custom-control/example-tel-input-example.html
@@ -1,7 +1,7 @@
-
+
–
-
+
–
-
+
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 60ef21b5e65..a1716eb7b03 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
@@ -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, OnDestroy {
+export class MyTelInput implements ControlValueAccessor, MatFormFieldControl, OnDestroy {
static nextId = 0;
parts: FormGroup;
stateChanges = new Subject();
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, OnDestroy {
this.stateChanges.next();
}
- constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef) {
+ constructor(
+ fb: FormBuilder,
+ private fm: FocusMonitor,
+ private elRef: ElementRef,
+ @Optional() @Self() public ngControl: NgControl) {
+
this.parts = fb.group({
area: '',
exchange: '',
@@ -97,9 +103,16 @@ export class MyTelInput implements MatFormFieldControl, 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, 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);
+ }
}