ControlValueAccessor自定义Angular表单Input控件

介绍

自定义Input组件，实现FormControl；

核心内容(ControlValueAccessor)

1. 给组件 注册 NG_VALUE_ACCESSOR 提供者

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InputComponent),
    multi: true
  }]
})

2. 实现 ControlValueAccessor 接口

export class InputComponent implements OnInit, ControlValueAccessor {
  ...
  constructor() { }
 
  ngOnInit() {
  }
  
  registerOnChange(fn: any): void {
  }

  registerOnTouched(fn: any): void {
  }

  setDisabledState(isDisabled: boolean): void {
  }

  writeValue(obj: any): void {
  }
}

细节

/* 视图层 html */
<input type="text" [ngModel]="value" (ngModelChange)="_onChange($event)"  [placeholder]="pla"
	[readOnly]="!!readOnly" (blur)="blur.emit($event)">

/* 逻辑层 */
value = '';
@Input() pla = '';
@Input() readOnly;
@Output() blur: EventEmitter<any> = new EventEmitter();

// 值改变的时候调用该函数，并传值
private _onChange(_: any) {}
constructor() { }

ngOnInit() {}

// 这里把formControl的回调函数绑定到 _onChange
registerOnChange(fn: any): void {
  this._onChange = fn;
}

// 处理用户交互(我没用到，也不需要)
registerOnTouched(fn: any): void {
}

// 禁用表单组件(这里我没用到，感觉就是相当于在input标签里加上 disabled)
setDisabledState(isDisabled: boolean): void {
}

// 处理传入的数据值
writeValue(obj: any): void {
  this.value = obj;
}

结尾

这样就可以实现该组件的[(ngModel)]以及FormGroup；