1. 首先，引入text-mask库：

import createTextMaskInputElement from 'text-mask-core/src/createTextMaskInputElement'; import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({ selector: '[textMask][ngModel]' }) export class TextMaskDirective { private textMaskInputElement: any;

constructor(public elementRef: ElementRef) {}
...

}

2. 然后，在组件中使用：

Enter a date

3. 最后，在组件类中添加以下代码：

const rawMask = [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/];

public dateMask = { guide: false, showMask: true, mask: rawMask };

constructor(private elementRef: ElementRef) {}

ngAfterViewInit() { setTimeout(() => { this.textMaskInputElement = createTextMaskInputElement( {inputElement: this.elementRef.nativeElement}, this.dateMask ); this.textMaskInputElement.update(this.dateValue); }, 0); // Timeout is required for avoid error: Expression has changed after it was checked }

@HostListener('input', ['$event']) onInput(event) { this.dateValue = event.target.value; }