首页 > 数据库技术 > 详细

Angular 学习笔记 (Custom Accessor + Mat FormField + Custom select)

时间:2019-11-27 14:55:13      阅读:89      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!