如何向 Angular Material datepicker 的所有实例添加指令？

Posted 2023-02-22

【中文标题】如何向 Angular Material datepicker 的所有实例添加指令？

【英文标题】：How can I add a directive to all instances of Angular Material datepicker?

【发布时间】：2021-04-22 20:10:48

【问题描述】：

我创建了一个自定义指令，用于检查角度材料日期选择器 (with help of here) 中的手动输入，并且它正在工作。

问：有没有办法将该指令添加到项目中已经存在的所有实例中，而无需一一添加指令？

我的指令：

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 指令添加到材料日期选择器输入的每个实例中，而无需在整个项目中每次使用时手动添加它？

【参考方案1】：

你可以使用任何现有的属性作为选择器，例如

@Directive(
  selector: "matDatepicker",
)

将针对所有具有matDatepicker 属性的元素。

另一个例子：

@Directive(selector: 'input:([matDatepicker])' )

将使用matDatepicker 属性定位每个input。

标签也是如此：

@Directive(
  selector: "mat-datepicker",
)

【讨论】：

谢谢你，它成功了，我实际上使用了：``` @Directive( selector: 'input:([matDatepicker])' ) ```它完全有效，如果没问题，你可以编辑你的答案，以便我可以选择它作为接受的答案@Mike-s？

@MasoudTahmasebi 我已经添加了您的示例。如果您的意图只是将其添加到具有上述属性的inputs，那么这就是要走的路