摘要：構(gòu)建一個(gè)自定義輸入組件今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和同樣作用，但同時(shí)也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內(nèi)容，那就是讓我們的自定義組件獲得值訪問權(quán)限。

今天我們來學(xué)習(xí)如何正確的構(gòu)建和一個(gè)具有和 同樣作用，但同時(shí)也具有自己的邏輯的輸入組件。

在讀這篇文章之前，希望你已經(jīng)把官方的文檔和案例都看過至少一遍了，具體的一些概念和細(xì)節(jié)不會(huì)在文章中講解。

我們先來看一下我們這篇文章里面所介紹的組件的表現(xiàn)形式是怎么樣的：

OK，上圖就是我們所要達(dá)到的效果了。那么，我們來分析下我們這個(gè)組件該具備哪些功能。

聚焦的時(shí)候，底部邊框?yàn)榫G色

具有自己的部分邏輯，比如在有輸入值的情況下，會(huì)出現(xiàn)一個(gè)刪除圖標(biāo)

當(dāng)輸入值為空的時(shí)候，提示錯(cuò)誤文案

可以插入其它的 DOM，比如最下面的發(fā)送驗(yàn)證碼按鈕

支持 input 的必要屬性，比如 maxlength、placeholder等

支持表單 angular2 form-control 表單綁定，如上圖中的值都是從 FormBuilder 中構(gòu)建的

我們將在后面一步步的來講解如何實(shí)現(xiàn)這樣一個(gè)自定義組件的功能；

我們先來構(gòu)建一個(gè)基礎(chǔ)的 angular2 組件,這里我們先新建一個(gè)叫做 input-control 的組件。

首先是 input-control.component.ts 文件：

@Component({
  selector: "input-control",
  templateUrl: "input-control.component.html",
  styleUrls: ["input-control.component.scss"],
  encapsulation: ViewEncapsulation.None,
})

然后是 input-control.component.html 文件：

剩下就是 input-control.component.scss 文件了，這里我就不貼出代碼了，各位可以根據(jù)自己的項(xiàng)目來設(shè)置對(duì)應(yīng)的樣式

最后，就是我們調(diào)用的時(shí)候的方式:

  
請(qǐng)輸入正確的手機(jī)號(hào)碼

是否對(duì)于上面的一些屬性和變量感到困惑，別急，讓我一步步道來！

有一點(diǎn)要謹(jǐn)記：我們是在用 DIV 來模擬一個(gè) input 的表現(xiàn)，同時(shí)具備自己的邏輯; 所以，當(dāng)我們需要 input 的對(duì)應(yīng)屬性值的時(shí)候，我們都需要從父容器傳遞到組件內(nèi)部的 input 上面，所以在這里我們需要用到 @Input 特性了

我們?cè)?input-control.component.ts 定義我們所需的一些屬性：

@Component({
  selector: "input-control",
  templateUrl: "input-control.component.html",
  styleUrls: ["input-control.component.scss"],
  host: {
    // 宿主元素 click 事件，觸發(fā) focus() 事件
    "(click)": "focus()",
    // 切換宿主元素 focus 樣式
    "[class.focus]": "focused"
  }
})
export class InputControlComponent {
  private _focused: boolean = false;
  private _value: any = "";
  private _disabled: boolean = false;
  private _readonly: boolean = false;
  private _required: boolean = false;

  // 外部傳入屬性
  @Input() type: string = "text";
  @Input() name: string = null;
  @Input() placeholder: string = null;
  @Input() minlength: number;
  @Input() maxlength: number;

  // value 屬性，以 get 方式攔截
  get value(): any {
    return this._value;
  };

  @Input() set value(v: any) {
    v = this._convertValueForInputType(v);
    if (v !== this._value) {
      this._value = v;
      // 觸發(fā)值改變事件，冒泡給父級(jí)
      this._onChangeCallback(v);
    }
  }

  // 只讀屬性
  get focused() {
    return this._focused;
  }

  @Input()
  get disabled(): boolean {
    return this._disabled;
  }
  set disabled(value) {
    this._disabled = this._coerceBooleanProperty(value);
  }

  @Input()
  get readonly(): boolean {
    return this._readonly;
  }
  set readonly(value) {
    this._readonly = this._coerceBooleanProperty(value);
  }

  @Input()
  get required(): boolean {
    return this._required;
  }
  set required(value) {
    this._required = this._coerceBooleanProperty(value);
  }
}

回顧的我們前面的 input-control.component.html 文件，我們定義了 type、name、placeholder、minlength、maxlength 可讀寫的屬性，同時(shí)還有 value、readonly、disabled、required 等只讀屬性。通過 [屬性]="源" 方式，接收父級(jí)傳入的數(shù)據(jù)。

OK，屬性我們都知道如何從父級(jí)去接收了，那么接下來我們來實(shí)現(xiàn) 點(diǎn)擊 操作：

我們先修改 input-control.component.ts 文件

@Component({
  ……
  host: {
    // 宿主元素 click 事件，觸發(fā) focus() 事件
    "(click)": "focus()",
    // 切換宿主元素 focus 樣式
    "[class.focus]": "focused"
  }
})

我們利用了 host 這個(gè)屬性，用來給宿主元素對(duì)應(yīng)操作，傳送門 @Component 相關(guān)屬性;
我們給宿主元素也就是 綁定了一個(gè) click 事件，同時(shí)根據(jù)自身屬性 focused 來切換一個(gè) .focus 類。在我們組件的 focus() 事件中，我們需要讓組件內(nèi)部的 input 聚焦，同時(shí)切換自身的 focused 值。為了拿到我們組件內(nèi)部的 input 元素，這里我們需要使用 @ViewChild()。

修改 input-control.component.ts 文件如下：

@Component({
  ……
  host: {
    // 宿主元素 click 事件，觸發(fā) focus() 事件
    "(click)": "focus()",
    // 切換宿主元素 focus 樣式
    "[class.focus]": "focused"
  }
})
export class InputControlComponent {
  ……
  ……

  private _focusEmitter: EventEmitter = new EventEmitter();
  @ViewChild("input") _inputElement: ElementRef; // 組件內(nèi)部 input 元素
  @ViewChild("iconDelete") iconDelete: ElementRef; // 刪除圖標(biāo)元素

  constructor(private hostRef: ElementRef) {
  }

  // 監(jiān)聽全局的點(diǎn)擊事件，如果不是當(dāng)前 input-control 組，則視為失去焦點(diǎn)操作
  @HostListener("window:click", ["$event"])
  inputControlBlurHandler(event) {
    var parent = event.target;
    // 如何當(dāng)前節(jié)點(diǎn)不是宿主節(jié)點(diǎn)，并且不等于 document 節(jié)點(diǎn)
    while (parent && parent != this.hostRef.nativeElement && parent != document) {
      // 取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)繼續(xù)尋找
      parent = parent.parentNode;
    }

    // 找到最頂層，則表示已經(jīng)不在宿主元素內(nèi)部了，觸發(fā)失去焦點(diǎn) fn
    if (parent == document) {
      this._focused = false;
    }
  }

  // 宿主聚焦
  focus() {
    // 觸發(fā)下面的 _handleFocus() 事件
    this._inputElement.nativeElement.focus();
  }

  // 輸入框聚焦
  _handleFocus(event: FocusEvent) {
    this._focused = true;
    this._focusEmitter.emit(event);
  }

  // 清空輸入值
  _handleClear() {
    this.value = "";
    return false;
  }

  // 這里觸發(fā) blur 操作，但是不改變 this._focused 的值，
  // 不然刪除圖標(biāo)無法實(shí)現(xiàn)它的功能，
  //設(shè)置 this._focused 的值將由上面的 @HostListener("window:click", ["$event"]) 來處理
  // 觸發(fā)父級(jí)的 blur 事件
  _handleBlur(event: any) {
    this._onTouchedCallback();
    this._blurEmitter.emit(event);
  }

  // 對(duì)外暴露 focus 事件
  @Output("focus") onFocus = this._focusEmitter.asObservable();
  ……
  ……
}

在上面的代碼中，我們通過宿主的 focus() 事件，讓 input 元素 focus, 同時(shí) input 元素聚焦之后，會(huì)觸發(fā)下面的 _handleFocus() 方法，在這個(gè)方法里面，我們修改組件自身的 focused 屬性，并對(duì)外發(fā)射一個(gè) focus 事件，用來向父級(jí)傳遞使用。同時(shí)，我們的刪除圖標(biāo)也是根據(jù)組件的 focused 屬性切換顯示：

我們的 input 和組件內(nèi)部的 value 屬性進(jìn)行了雙向綁定，所以在 _handleClear 之后，我們的輸入框的值自然也就被清空了。

在完成上面的一些步驟之后，我們的組件基本功能完成了，但是接下來還有最重要的一部分內(nèi)容，那就是讓我們的自定義組件獲得 值訪問 權(quán)限。
在官方的文檔中有提到一點(diǎn) https://github.com/angular/material2/blob/master/src/lib/input/input.ts

在查看官方的文檔之后，我們發(fā)現(xiàn)要實(shí)現(xiàn)自定義組件的值訪問權(quán)限，我們需要繼承 ControlValueAccessor 接口，同時(shí)實(shí)現(xiàn)它內(nèi)部的對(duì)應(yīng)的接口

// 要實(shí)現(xiàn)雙向數(shù)據(jù)綁定，這個(gè)不可少
export const INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InputControlComponent),
  multi: true
};

const noop = () => {
};

@Component({
  selector: "input-control",
  templateUrl: "input-control.component.html",
  styleUrls: ["input-control.component.scss"],
  host: {
    // 宿主元素 click 事件，觸發(fā) focus() 事件
    "(click)": "focus()",
    // 切換宿主元素 focus 樣式
    "[class.focus]": "focused"
  },
  // 
  encapsulation: ViewEncapsulation.None,
  providers: [INPUT_CONTROL_VALUE_ACCESSOR]
})
export class InputControlComponent implements ControlValueAccessor {
  ……
  ……
  /** Callback registered via registerOnTouched (ControlValueAccessor)
   * 此屬性在做表單校驗(yàn)的時(shí)候，不可少，
   * 如果缺少了這個(gè)屬性，F(xiàn)ormControl.touched 屬性將監(jiān)測不到，切記??！
   */
  private _onTouchedCallback: () => void = noop;
  /** Callback registered via registerOnChange (ControlValueAccessor) */
  private _onChangeCallback: (_: any) => void = noop;

  /**
   * Write a new value to the element.
   */
  writeValue(value: any) {
    this._value = value;
  }

  /**
   * Set the function to be called when the control receives a change event.
   */
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  };

  /**
   * Set the function to be called when the control receives a touch event.
   */
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }
  ……
  ……
}

正如上面代碼中所示的一樣，實(shí)現(xiàn)了這些對(duì)應(yīng)的接口之后，我們就能像使用普通的 input 元素一樣使用我們的自定義組件了。

回顧我們前面文章開頭的 GIF 圖片，我們還有一個(gè)獲取驗(yàn)證碼的按鈕，同時(shí)，我們的錯(cuò)誤提示也是放在組件內(nèi)部的。要支持這種形式的，我們需要在組件內(nèi)部加上 標(biāo)簽
有了這個(gè)之后，所有包裹在 組件內(nèi)部的元素都將被渲染到組件內(nèi)部

父組件調(diào)用 input-control:

  
  
請(qǐng)輸入驗(yàn)證碼

瀏覽器渲染之后的的 DOM 結(jié)構(gòu)：

  

  獲取驗(yàn)證碼
      

在后期的時(shí)候，我整合了自定輸入組件與 FormControl 一起使用，在使用過程中，發(fā)現(xiàn)在需要使用 .touched 特性的時(shí)候，發(fā)現(xiàn)無法生效，通過查資料發(fā)現(xiàn)，如果需要讓這個(gè)特性生性，我們的輸入組件必須監(jiān)聽 blur 事件并且在處理事件中調(diào)用觸發(fā)對(duì)外的 blur 事件，具體代碼見前面的 _handleBlur() 內(nèi)容。


完整 Demo 地址：mcare-app
這個(gè) Demo 里面整合了路由、子模塊、服務(wù)、動(dòng)態(tài)表單等特性的使用方法，有興趣的可以參考下，還在持續(xù)完善中。這個(gè) Demo 是參照自己做過的項(xiàng)目部分UI，當(dāng)然不會(huì)涉及核心的業(yè)務(wù)代碼：）。

Angular2 material2 官方UI庫
CUSTOM FORM CONTROLS IN ANGULAR 2
http://stackoverflow.com/questions/38447681/touched-untouched-not-updating-in-custom-input-component-angular-2