docs(material/form-field-custom-control): custom phone input autoadvance (#19650)

Wildhammer · web-flow · commit b8fba33438bb · 2020-06-17T16:16:55.000-07:00
* feat(material/form-field-custom-control): custom phone input autoadvance Automatically focus the next input when done with the previous one. Allow autofocusing backward when pressing backspace. onContainerClick now focuses on the last filled input on click. Using maxLength on the inputs to not allow more characters than the size of the input. Fixes #13195 * style(material/form-field-custom-control): styling update for phone number input Updates styling for form-field-custom-control-example component, multi-line elements in template due to them getting long, argument spacing. Fixes #13195 * style(material/form-field-custom-control): removes unnecessary !! from autoFocusNext * Merge remote-tracking branch 'upstream/master' into phone-input-auto-advance
diff --git a/src/components-examples/material/form-field/form-field-custom-control/example-tel-input-example.html b/src/components-examples/material/form-field/form-field-custom-control/example-tel-input-example.html
@@ -1,22 +1,26 @@
 <div [formGroup]="parts" class="example-tel-input-container">
-  <input
-    class="example-tel-input-element"
-    formControlName="area"
-    size="3"
-    aria-label="Area code"
-    (input)="_handleInput()">
+  <input class="example-tel-input-element"
+         formControlName="area" size="3"
+         maxLength="3"
+         aria-label="Area code"
+         (input)="_handleInput(parts.controls.area, exchange)"
+         #area>
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input
-    class="example-tel-input-element"
-    formControlName="exchange"
-    size="3"
-    aria-label="Exchange code"
-    (input)="_handleInput()">
+  <input class="example-tel-input-element"
+         formControlName="exchange"
+         maxLength="3"
+         size="3"
+         aria-label="Exchange code"
+         (input)="_handleInput(parts.controls.exchange, subscriber)"
+         (keyup.backspace)="autoFocusPrev(parts.controls.exchange, area)"
+         #exchange>
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input
-    class="example-tel-input-element"
-    formControlName="subscriber"
-    size="4"
-    aria-label="Subscriber number"
-    (input)="_handleInput()">
+  <input class="example-tel-input-element"
+         formControlName="subscriber"
+         maxLength="4"
+         size="4"
+         aria-label="Subscriber number"
+         (input)="_handleInput(parts.controls.subscriber)"
+         (keyup.backspace)="autoFocusPrev(parts.controls.subscriber, exchange)"
+         #subscriber>
 </div>
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
@@ -1,6 +1,8 @@
-<mat-form-field appearance="fill">
-  <mat-label>Phone number</mat-label>
-  <example-tel-input required></example-tel-input>
-  <mat-icon matSuffix>phone</mat-icon>
-  <mat-hint>Include area code</mat-hint>
-</mat-form-field>
+<div [formGroup]="form">
+	<mat-form-field appearance="fill">
+		<mat-label>Phone number</mat-label>
+		<example-tel-input formControlName="tel" required></example-tel-input>
+		<mat-icon matSuffix>phone</mat-icon>
+		<mat-hint>Include area code</mat-hint>
+	</mat-form-field>
+</div>
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
@@ -1,37 +1,65 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
-import {FormBuilder, FormGroup, ControlValueAccessor, NgControl, Validators} from '@angular/forms';
+import {
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  Optional,
+  Self,
+  ViewChild
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormGroup,
+  ControlValueAccessor,
+  NgControl,
+  Validators,
+  FormControl,
+  AbstractControl
+} from '@angular/forms';
 import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
 @Component({
   selector: 'form-field-custom-control-example',
   templateUrl: 'form-field-custom-control-example.html',
-  styleUrls: ['form-field-custom-control-example.css'],
+  styleUrls: ['form-field-custom-control-example.css']
 })
-export class FormFieldCustomControlExample {}
+export class FormFieldCustomControlExample {
+  form: FormGroup = new FormGroup({
+    tel: new FormControl(new MyTel('', '', ''))
+  });
+}
 
 /** Data structure for holding telephone number. */
 export class MyTel {
-  constructor(public area: string, public exchange: string, public subscriber: string) {}
+  constructor(
+    public area: string,
+    public exchange: string,
+    public subscriber: string
+  ) {}
 }
 
 /** Custom `MatFormFieldControl` for telephone number input. */
 @Component({
   selector: 'example-tel-input',
   templateUrl: 'example-tel-input-example.html',
   styleUrls: ['example-tel-input-example.css'],
-  providers: [{provide: MatFormFieldControl, useExisting: MyTelInput}],
+  providers: [{ provide: MatFormFieldControl, useExisting: MyTelInput }],
   host: {
     '[class.example-floating]': 'shouldLabelFloat',
     '[id]': 'id',
-    '[attr.aria-describedby]': 'describedBy',
+    '[attr.aria-describedby]': 'describedBy'
   }
 })
-export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
+export class MyTelInput
+  implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
+  @ViewChild('area') areaInput: HTMLInputElement;
+  @ViewChild('exchange') exchangeInput: HTMLInputElement;
+  @ViewChild('subscriber') subscriberInput: HTMLInputElement;
 
   parts: FormGroup;
   stateChanges = new Subject<void>();
@@ -44,31 +72,41 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   onTouched = () => {};
 
   get empty() {
-    const {value: {area, exchange, subscriber}} = this.parts;
+    const {
+      value: { area, exchange, subscriber }
+    } = this.parts;
 
     return !area && !exchange && !subscriber;
   }
 
-  get shouldLabelFloat() { return this.focused || !this.empty; }
+  get shouldLabelFloat() {
+    return this.focused || !this.empty;
+  }
 
   @Input()
-  get placeholder(): string { return this._placeholder; }
+  get placeholder(): string {
+    return this._placeholder;
+  }
   set placeholder(value: string) {
     this._placeholder = value;
     this.stateChanges.next();
   }
   private _placeholder: string;
 
   @Input()
-  get required(): boolean { return this._required; }
+  get required(): boolean {
+    return this._required;
+  }
   set required(value: boolean) {
     this._required = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
   private _required = false;
 
   @Input()
-  get disabled(): boolean { return this._disabled; }
+  get disabled(): boolean {
+    return this._disabled;
+  }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
     this._disabled ? this.parts.disable() : this.parts.enable();
@@ -79,27 +117,38 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   @Input()
   get value(): MyTel | null {
     if (this.parts.valid) {
-      const {value: {area, exchange, subscriber}} = this.parts;
+      const {
+        value: { area, exchange, subscriber }
+      } = this.parts;
       return new MyTel(area, exchange, subscriber);
     }
     return null;
   }
   set value(tel: MyTel | null) {
-    const {area, exchange, subscriber} = tel || new MyTel('', '', '');
-    this.parts.setValue({area, exchange, subscriber});
+    const { area, exchange, subscriber } = tel || new MyTel('', '', '');
+    this.parts.setValue({ area, exchange, subscriber });
     this.stateChanges.next();
   }
 
   constructor(
     formBuilder: FormBuilder,
     private _focusMonitor: FocusMonitor,
     private _elementRef: ElementRef<HTMLElement>,
-    @Optional() @Self() public ngControl: NgControl) {
-
+    @Optional() @Self() public ngControl: NgControl
+  ) {
     this.parts = formBuilder.group({
-      area: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      exchange: [null, [Validators.required, Validators.minLength(3), Validators.maxLength(3)]],
-      subscriber: [null, [Validators.required, Validators.minLength(4), Validators.maxLength(4)]],
+      area: [
+        null,
+        [Validators.required, Validators.minLength(3), Validators.maxLength(3)]
+      ],
+      exchange: [
+        null,
+        [Validators.required, Validators.minLength(3), Validators.maxLength(3)]
+      ],
+      subscriber: [
+        null,
+        [Validators.required, Validators.minLength(4), Validators.maxLength(4)]
+      ]
     });
 
     _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
@@ -115,6 +164,18 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
     }
   }
 
+  autoFocusNext(control: AbstractControl, nextElement?: HTMLInputElement): void {
+    if (!control.errors && nextElement) {
+      this._focusMonitor.focusVia(nextElement, 'program');
+    }
+  }
+
+  autoFocusPrev(control: AbstractControl, prevElement: HTMLInputElement): void {
+    if (control.value.length < 1) {
+      this._focusMonitor.focusVia(prevElement, 'program');
+    }
+  }
+
   ngOnDestroy() {
     this.stateChanges.complete();
     this._focusMonitor.stopMonitoring(this._elementRef);
@@ -125,8 +186,14 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
   }
 
   onContainerClick(event: MouseEvent) {
-    if ((event.target as Element).tagName.toLowerCase() != 'input') {
-      this._elementRef.nativeElement.querySelector('input')!.focus();
+    if (this.parts.controls.subscriber.valid) {
+      this._focusMonitor.focusVia(this.subscriberInput, 'program');
+    } else if (this.parts.controls.exchange.valid) {
+      this._focusMonitor.focusVia(this.subscriberInput, 'program');
+    } else if (this.parts.controls.area.valid) {
+      this._focusMonitor.focusVia(this.exchangeInput, 'program');
+    } else {
+      this._focusMonitor.focusVia(this.areaInput, 'program');
     }
   }
 
@@ -146,7 +213,8 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
     this.disabled = isDisabled;
   }
 
-  _handleInput(): void {
+  _handleInput(control: AbstractControl, nextElement?: HTMLInputElement): void {
+    this.autoFocusNext(control, nextElement);
     this.onChange(this.value);
   }
 
