custom form control 之前就写过了,这里简单写一下.
创建一个组件实现 ControlValueAccessor 接口
@Component({ providers: [ { provide: NG_VALUE_ACCESSOR, multi: true, useExisting: MyInputComponent }, ], }) export class MyInputComponent implements ControlValueAccessor {}
实现 writeValue, model -> view 的时候被调用的,这里实现如何更新 view. 如果时 OnPush 记得要 markForCheck
writeValue(value: any): void { console.log(‘writeValue‘); this.cdr.markForCheck(); this.value = value; }
实现 registerOnChange 方法. view -> model 内部通过调用这个方法向外输出值
private onChangeFn: (value: any) => void; registerOnChange(fn: MyInputComponent[‘onChangeFn‘]): void { this.onChangeFn = fn; }
实现 registerOnTouched 方法, view -> model, 当内部 touched 了通知外部
private onTouchedFn: () => void; registerOnTouched(fn: MyInputComponent[‘onTouchedFn‘]): void { console.log(‘registerOnTouched‘); this.onTouchedFn = fn; }
实现 setDisabledState 方法, model -> view, 当外部设定 disabled 后, 内部更新 view
setDisabledState(isDisabled: boolean): void { console.log(‘setDisabledState‘); this.cdr.markForCheck(); this.disabled = isDisabled; }
执行的顺序是 ngOnInit-> DoCheck -> writeValue-> registerOnChange -> registerOnTouched -> setDisabledState -> ngAfterContentInit ...
Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)
原文:https://www.cnblogs.com/keatkeat/p/11941939.html