简短的回答：您需要在某个类中实现 ControlValueAccessor 并将其作为带有某些指令的 ngModel 的 NG_VALUE_ACCESSOR 提供。这个 ControlValueAccessor 和指令实际上可以是同一个类。
TL;DR
这不是很明显，但仍然不是很复杂。下面是我的一个日期控件的骨架。这个东西充当 angular 1 ng-model 的解析器/格式化程序对。
这一切都始于 ngModel 将所有 NG_VALUE_ACCESSOR 注入自身。还有一堆默认提供者，它们都被注入到 ngModel 构造函数中，但是 ngModel 可以区分默认值访问器和用户提供的访问器。所以它选择了一个与之合作。大致看起来像这样：如果有用户的值访问器，那么它将被选中，否则它会退回到从默认值中选择。完成初始设置后。
控制值访问器应订阅输入元素上的“输入”或其他类似事件，以处理来自它的输入事件。
当值在外部被改变时，ngModel 在初始化期间选择的值访问器上调用 writeValue() 方法。此方法负责渲染显示值，该值将作为字符串显示给用户。
在某些时候（通常在模糊事件中）控件可以被标记为已触摸。这也显示出来了。
请注意：下面的代码不是真正的生产代码，它没有经过测试，它可能包含一些差异或不准确之处，但总的来说它展示了这种方法的整体思想。
import {
Directive,
Input,
Output,
SimpleChanges,
ElementRef,
Renderer,
EventEmitter,
OnInit,
OnDestroy,
OnChanges,
forwardRef
} from '@angular/core';
import {Subscription, Observable} from 'rxjs';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
const DATE_INPUT_VALUE_ACCESSOR_PROVIDER = [
{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateInputDirective), multi: true}
];
@Directive({
// [date-input] is just to distinguish where exactly to place this control value accessor
selector: 'input[date-input]',
providers: [DATE_INPUT_VALUE_ACCESSOR_PROVIDER],
host: { 'blur': 'onBlur()', 'input': 'onChange($event)' }
})
export class DateInputDirective implements ControlValueAccessor, OnChanges {
@Input('date-input')
format: string;
model: TimeSpan;
private _onChange: (value: Date) => void = () => {
};
private _onTouched: () => void = () => {
};
constructor(private _renderer: Renderer,
private _elementRef: ElementRef,
// something that knows how to parse value
private _parser: DateParseTranslator,
// something that knows how to format it back into string
private _formatter: DateFormatPipe) {
}
ngOnInit() {
}
ngOnChanges(changes: SimpleChanges) {
if (changes['format']) {
this.updateText(this.model, true);
}
}
onBlur = () => {
this.updateText(this.model, false);
this.onTouched();
};
onChange = ($event: KeyboardEvent) => {
// the value of an input - don't remember exactly where it is in the event
// so this part may be incorrect, please check
let value = $event.target.value;
let date = this._parser.translate(value);
this._onChange(date);
};
onTouched = () => {
this._onTouched();
};
registerOnChange = (fn: (value: Date) => void): void => {
this._onChange = fn;
};
registerOnTouched = (fn: () => void): void => {
this._onTouched = fn;
};
writeValue = (value: Date): void => {
this.model = value;
this.updateText(value, true);
};
updateText = (date: Date, forceUpdate = false) => {
let textValue = date ? this._formatter.transform(date, this.format) : '';
if ((!date || !textValue) && !forceUpdate) {
return;
}
this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', textValue);
}
}
然后在html模板中：
<input date-input="DD/MM/YYYY" [(ngModel)]="myModel"/>