1. 组件继承ControlValueAccessor，ControlValueAccessor接口需要实现三个必选方法

writeValue()  用于向元素中写入值，获取表单的元素的元素值

registerOnChange（）设置一个当控件接受到改变的事件时所要调用的函数；这也是我们把变化 emit 回表单的机制；

registerOnTouched() 设置一个当控件接受到 touch 事件时所要调用的函数

export class ImageListSelectComponent implements ControlValueAccessor {_onChange = (_:any)=>{};writeValue(obj: any): void{this.selectedImg = obj;}registerOnChange(fn: (_: any) => void): void {this._onChange = fn;}registerOnTouched(fn: any): void {}}

2.  一个的 token 是 NG_VALUE_ACCESSOR 。这是将控件本身注册到 DI 框架成为一个可以让表单访问其值的控件。

但问题来了，如果在元数据中注册了控件本身，而此时控件仍未创建，这怎么破？这就得用到 forwardRef 了，这个函数允许我们引用一个尚未定义的对象。

另外一个 NG_VALIDATORS 是让控件注册成为一个可以让表单得到其验证状态的控件

providers:[{provide:NG_VALUE_ACCESSOR,useExisting:forwardRef(()=>ImageListSelectComponent),multi:true},{provide:NG_VALIDATORS,useExisting:forwardRef(()=>ImageListSelectComponent),multi:true}]

3. 控件的验证器函数（必写方法，否则会报错）

validate(c:FormControl):{[key:string]:any}{return this.selectedImg ? null :{imageListNotValid:true}}

4. 表单控制器命名formControlName="avatar"

　　　　　　<app-image-list-select[cols]="'6'"[rowHeight]="'1:1'"[items]='items'[title]="'选择头像：'"formControlName="avatar"></app-image-list-select>

完整代码：

app-image-list-select.component.ts

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

@Component({
  selector: 'app-image-list-select',
  templateUrl: './image-list-select.component.html',
  styles: [],
  providers:[
    {
      provide:NG_VALUE_ACCESSOR,
      useExisting:forwardRef(()=>ImageListSelectComponent),
      multi:true
    },
    {
      provide:NG_VALIDATORS,
      useExisting:forwardRef(()=>ImageListSelectComponent),
      multi:true
    }
  ]
})
export class ImageListSelectComponent implements ControlValueAccessor {

  @Input() cols=6;
  @Input() rowHeight='1:1';
  @Input() items:string[]=[];
  @Input() title = '选择';
  selectedImg:string;

  _onChange = (_:any)=>{};

  constructor() { }

  writeValue(obj: any): void{
    console.log(obj);
    this.selectedImg = obj;
  }
  registerOnChange(fn: (_: any) => void): void {
    this._onChange = fn;
  }

  registerOnTouched(fn: any): void {
  }

  validate(c:FormControl):{[key:string]:any}{
    return this.selectedImg ? null :{
      imageListNotValid:true
    }
  }

  changeSelected(index){
    this.selectedImg = this.items[index];
    this._onChange(this.selectedImg);
  }

}

app-image-list-select.component.html

<div>
  <h3>{{title}}</h3>
  <mat-icon [svgIcon]='selectedImg'></mat-icon>
</div>
<mat-grid-list [cols]="cols" [rowHeight]="rowHeight">
  <mat-grid-tile *ngFor="let item of items;let i = index">
    <mat-icon [svgIcon]='item' (click)="changeSelected(i)"></mat-icon>
  </mat-grid-tile>
</mat-grid-list>

register.component.html引用自定义表单控件app-image-list-select

<div class="login-wrap">
  <form [formGroup]="myGroup" (ngSubmit)="onSubmit(myGroup,$event)">
    <mat-card class="example-card">
      <mat-card-header><mat-card-title>注册</mat-card-title></mat-card-header>
      <mat-card-content>
        <mat-form-field>
          <input matInput placeholder="您的email" formControlName="email">
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="您的姓名" formControlName="username">
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="您的密码" formControlName="password">
        </mat-form-field>
        <mat-form-field>
          <input matInput placeholder="请重新输入密码" formControlName="repassword">
        </mat-form-field>
        <div>
          <app-image-list-select
          [cols]="'6'"
          [rowHeight]="'1:1'"
          [items]='items'
          [title]="'选择头像：'"
          formControlName="avatar">
          </app-image-list-select>
        </div>
      </mat-card-content>
      <mat-card-actions>
        <button mat-raised-button type="submit">注册</button>
      </mat-card-actions>
    </mat-card>
  </form>
</div>

register.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styles: [`
  mat-form-field{width:100%;}
  form{
    width: 500px;
    margin: 20px auto;
  }
  `]
})
export class RegisterComponent implements OnInit {

  myGroup:FormGroup;
  items=[];
  constructor(private fb:FormBuilder) { }

  ngOnInit() {
    const nums = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
    this.items = nums.map(d=> `avatars:svg-${d}`);

    const img = `avatars:svg-${Math.floor(Math.random()*16).toFixed()}`;

    this.myGroup = this.fb.group({
      email:[],
      username:[],
      password:[],
      repassword:[],
      avatar:[img]
    });
  }
  onSubmit({value,valid},ev:Event){
    console.log(value);
    console.log(valid);
  }

}