diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html index 583d6b952857..7586adfca69b 100644 --- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html +++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.html @@ -1,8 +1,8 @@
- - Phone number - - phone - Include area code - + + Phone number + + phone + Include area code +
diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts index 2b7d5cefff32..d45dcd600a73 100644 --- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts +++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts @@ -63,7 +63,6 @@ export class MyTelInput parts: FormGroup; stateChanges = new Subject(); focused = false; - errorState = false; controlType = 'example-tel-input'; id = `example-tel-input-${MyTelInput.nextId++}`; describedBy = ''; @@ -129,6 +128,10 @@ export class MyTelInput this.stateChanges.next(); } + get errorState(): boolean { + return this.parts.invalid && this.parts.dirty; + } + constructor( formBuilder: FormBuilder, private _focusMonitor: FocusMonitor, @@ -185,7 +188,7 @@ export class MyTelInput this.describedBy = ids.join(' '); } - onContainerClick(event: MouseEvent) { + onContainerClick() { if (this.parts.controls.subscriber.valid) { this._focusMonitor.focusVia(this.subscriberInput, 'program'); } else if (this.parts.controls.exchange.valid) {