Angular 2 多自定义值访问器 [英] Angular 2 multiple custom value accessor

问题描述

我正在使用 angular2 创建一个应用程序.

我需要使用日历弹出框从用户输入中获取日期，但我需要在用户输入上放置一个掩码，以便在他打字时保持这种格式 dd-mm-YYYY.

我使用了两个不同的模块，它们来自 Web ng-bootstrap 和 angular2-text-mark>

<input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd"name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">

当我在同一标签上使用 textMask 和 ngbDatepicker 时，我收到此错误

<块引用>

错误:多个自定义值访问器与具有未指定名称属性的表单控件匹配.

有没有办法做这种事情?

谢谢

解决方案

直到今天还没有解决方案.这是我为仍然能够使用 MASKED INPUT 和 Ngb DATEPICKER 而所做的工作，我创建了两个输入，一个带有屏蔽输入，另一个带有日期选择器.每当值更改时，它们都会更新主对象(以前是 ngModel 绑定.

这是代码.我希望它可以帮助某人.

<输入类型=文本"class="form-control form-control-sm"[(ngModel)]="begin_date"(更改)="onDateInput($event.target.value)"占位符="dd/mm/aaaa"[textMask]="{mask: maskedInput.date}"><输入类型=隐藏"(dateSelect)="onDateSelect($event)"[(ngModel)]="object.begin"ngbDatepicker#dI="ngbDatepicker"><div class="input-group-addon"><按钮class="btn btn-outline-secondary btn-sm"(点击)="dI.toggle()"类型=按钮"><我class="fa fa-calendar"咏叹调隐藏=真"></i>

I am creating an application using angular2.

I need to get a Date from user input using a calendar popover, but I need to put a mask on user input to stay in this format dd-mm-YYYY when he is typing.

I am using two different modules that I got from web ng-bootstrap and angular2-text-mark

<input [textMask]="{mask: mask}" type="text" class="form-control" placeholder="yyyy-mm-dd"
         name="dp" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker">

When I use textMask and ngbDatepicker on same tag I get this error

ERROR: More than one custom value accessor matches form control with unspecified name attribute.

Is there a way to do this kind of things ?

Thanks

解决方案

It doesn't have a solution until today. Here is what i've done to still be able to use a MASKED INPUT and a Ngb DATEPICKER, I've created two inputs, one with the masked input, the other with the datepicker. Whenever a value changes, they both update the main object (wich used to be the ngModel bind.

Here is the code. I hope it helps someone.

<div class="input-group">
  <input
    type="text"
    class="form-control form-control-sm"
    [(ngModel)]="begin_date"
    (change)="onDateInput($event.target.value)"
    placeholder="dd/mm/aaaa"
    [textMask]="{mask: maskedInput.date}"
  >
  <input
    type="hidden"
    (dateSelect)="onDateSelect($event)"
    [(ngModel)]="object.begin"
    ngbDatepicker
    #dI="ngbDatepicker"
  >
  <div class="input-group-addon">
    <button
      class="btn btn-outline-secondary btn-sm"
      (click)="dI.toggle()"
      type="button"
    >
      <i
        class="fa fa-calendar"
        aria-hidden="true"
      ></i>
    </button>
  </div>
</div>

这篇关于Angular 2 多自定义值访问器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！