[英]How can I add a directive to all instances of Angular Material datepicker?
我创建了一个自定义指令,用于检查 angular 材料日期选择器中的手动条目( 在此处的帮助下),它正在工作。
问:有没有什么方法可以将该指令添加到项目中已经存在的所有实例中,而无需一一添加指令?
我的指令:
import { Directive, ElementRef, HostBinding, OnDestroy, OnInit } from '@angular/core';
import * as textMask from '../../../util/vanillaTextMask.js';
@Directive({
selector: `fed-mask, [fed-mask], [fedMask]`
})
export class FedMaskDirective implements OnInit, OnDestroy {
@HostBinding('class.fed-mask') compClass = true;
fedMask = {
mask: [
new RegExp('\\d'),
new RegExp('\\d'),
'.',
new RegExp('\\d'),
new RegExp('\\d'),
'.',
new RegExp('\\d'),
new RegExp('\\d'),
new RegExp('\\d'),
new RegExp('\\d')
],
showMask: false,
guide: false,
placeholderChar: '_'
};
maskedInputController;
constructor(private element: ElementRef) { }
ngOnInit(): void {
this.maskedInputController = textMask.maskInput({
inputElement: this.element.nativeElement,
...this.fedMask
});
}
ngOnDestroy() {
this.maskedInputController.destroy();
}
}
我目前如何使用它:
<mat-form-field>
<input
(dateChange)="DateChange($event)"
formControlName="Date"
[matDatepicker]="Datepicker"
matInput
placeholder="Date"
(click)="Datepicker.open()"
fedMask
>
<mat-datepicker-toggle matSuffix [for]="Datepicker"></mat-datepicker-toggle>
<mat-datepicker #Datepicker></mat-datepicker>
<mat-error *ngIf="form.get('Date').hasError('required')">
Error
</mat-error>
</mat-form-field>
期待:
有没有办法将fedMask
指令添加到材料日期选择器输入的每个实例中,而无需在整个项目中每次使用时手动添加它?
您可以使用任何现有属性作为选择器,例如
@Directive({
selector: "matDatepicker",
})
将针对具有matDatepicker
属性的每个元素。
另一个例子:
@Directive({selector: 'input:([matDatepicker])' })
将使用matDatepicker
属性定位每个input
。
标签也是如此:
@Directive({
selector: "mat-datepicker",
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.