Angular中的ControlValueAccessor用法 之 自定义组件关联formControlName

当项目中存在大量的某个相同的表单项，如果你一个一个重复写费劲了…
在某期迭代需求开发时，产品告知你：来！整个项目都给我加一个xxx筛选框…
又或者学习过程中你不熟悉文档中ControlValueAccessor的用法…
来，看这篇文章，保！你！懂！

1.适用场景：

form表单中，想把某个表单项（input，select，radio,checkbox等等~）拎出来作为单独的组件使用，但不想使用父子组件传参的那种方式，并且仍想使用formControlName

如果，曾经，上述的这种逻辑触及到了我们的知识盲区，想必一定会送三个字：想得美
可是，现在，不同了！我们开始学习他，攻克她，掌握它

2.相关知识文档

敲黑板！
首要查询的当然是官方文档喽，具体说明以及方法均已框框的形式重点标出！

其次么，那就打开node_modules 查看ng-zorro-antd文件夹下的bundles文件夹下边的文件喽（模仿怎么写~~balabalabala~）

3.喊你抄作业啦~~~~~~如何使用

首先是独立组件的书写：
HTML

<nz-select
  [nzPlaceHolder]="nzPlaceHolder"
  [ngModel]="nzValue"
  [disabled]="nzDisabled"
  (ngModelChange)="handleChange($event)"
>
  <nz-option nzValue="" nzLabel="全部"></nz-option>
  <nz-option
    *ngFor="let item of Options"
    [nzValue]="item.id"
    [nzLabel]="item.name"
  ></nz-option>
</nz-select>

TS

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

type OnChangeType = (value: number | string) => void;
type OnTouchedType = () => any;

@Component({
  selector: 'app-search-name',
  templateUrl: './search-name.component.html',
  styleUrls: ['./search-name.component.scss'],
  providers: [
    {
      useExisting: forwardRef(() => SearchNameComponent),
      provide: NG_VALUE_ACCESSOR,
      multi: true,
    },
  ],
})
export class SearchNameComponent implements OnInit, ControlValueAccessor {
  @Input() nzValue: number | string; // 默认的初始值
  @Input() nzDisabled = false; // 默认的灰显状态-不灰显
  @Input() nzPlaceHolder: string;

  loading = false;
  Options = []; // 枚举列表（请求接口拿，这里省略该逻辑代码）
  onChange: OnChangeType = () => {};
  onTouched: OnTouchedType = () => {};

  constructor() {}

  ngOnInit() {
    // 请求select的枚举列表数据
    // this.Options  = xxx
  }
  
  // ControlValueAccessor的四项
  writeValue(value: number | string) {
  // 刷新页面的时候，这个方法是会请求的，也就是说：这里能捕获到使用该组件所绑定的formControlName的当前值并反显
    this.nzValue = value;
  }
  registerOnChange(fn: OnChangeType) {
    this.onChange = fn;
  }
  registerOnTouched(fn: OnTouchedType) {
    this.onTouched = fn;
  }
  setDisabledState(disabled: boolean) {
    this.nzDisabled = disabled;
  }
  // 这里是select的change事件，当值改变时会触发
  handleChange(value) {
    this.nzValue = value;
    // 这里onChange是尤为重要的方法，可以将值传输出去
    this.onChange(this.nzValue);
  }
}

其次，我们就可以在父组件或者其他组件中使用ta啦

   <app-search-name
        formControlName="tempName"
        nzPlaceHolder="请选择xxx"
   ></app-search-name>

这时候，formControlName是真正的绑定自定义组件上了，值变动时也能实时捕获哦