介绍
自定义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;