angular 响应式自定义表单控件—注册头像实例

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);
   }

 }