Question

我正在使用“ Ng日期时间选择器”通过文本输入输入日期。但是，如果用户尝试在日历上编辑选定的日期，则无法使用“ mask =“ 00/00/0000 00:00”使它正常工作。

如果用户尝试编辑输入，则在当前情况下，输入将允许放置任何字符。

一旦我在输入中添加“ mask =“ 00/00/0000 00:00”，就会收到错误消息“多个定制值访问器将表单控件与未指定名称属性匹配”。

还有其他我可以尝试的东西吗？

https://github.com/angular/angular/issues/16755

我已经尝试了上面的解决方案，但是我创建的指令不会反映在我的输入中。

输入

        <input 
            [(ngModel)]="dataAgendamento" 
            [owlDateTimeTrigger]="dataAgn" 
            [owlDateTime]="dataAgn"
            [owlDateTimeFilter]="noWeekend"
            #dataAg="ngModel"
            (ngModelChange)="setDataAgn(dataAg)" 
            required
            mask="00/00/0000 00:00"  
            type="text" 
            style="width: 160px; padding: 7px" 
            placeholder="00/00/0000 00:00">

指令

   import { Directive, ElementRef, OnDestroy } from '@angular/core';
   import * as textMask from '../../../node_modules/vanilla-text mask/dist/vanillaTextMask.js';

   @Directive({
       selector: '[appMaskDate]'
   })

   export class MaskDateDirective implements OnDestroy {

   mask = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/]; // dd/mm/yyyy
   maskedInputController;

  constructor(private element: ElementRef) {
       this.maskedInputController = textMask.maskInput({
         inputElement: this.element.nativeElement,
         mask: this.mask
   });
 }

 ngOnDestroy() {
     this.maskedInputController.destroy();
 }

}

使用指令输入

        <input 
            [(ngModel)]="dataAgendamento" 
            [owlDateTimeTrigger]="dataAgn" 
            [owlDateTime]="dataAgn"
            [owlDateTimeFilter]="noWeekend"
            #dataAg="ngModel"
            (ngModelChange)="setDataAgn(dataAg)" 
            required
            appMaskDate 
            type="text" 
            style="width: 160px; padding: 7px" 
            placeholder="00/00/0000 00:00">

多个自定义值访问器将表单控件与未指定名称属性匹配

0 个答案: