Angular 2 多自定义值访问器答案

【问题标题】：Angular 2 multiple custom value accessorAngular 2 多自定义值访问器
【发布时间】：2020-01-21 18:13:07
【问题描述】：

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

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

我正在使用从网络 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 时，我收到此错误

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

有没有办法做这种事情？

谢谢

【问题讨论】：

哪个是角度版本？尝试将 ngDefaultControl 属性添加到您的输入中。
2.4 版。你是说不使用 ngModel 吗？还是行不通。问题是当我使用 textMask 和 ngbDatepicker 时。似乎 Angular 不能支持来自不同包的两个指令。
@RafaelAndrade - 你找到解决方案了吗？我也面临同样的问题。

标签： angular angular2-directives ng-bootstrap maskedinput

【解决方案1】：

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

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

<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>

【讨论】：

【解决方案2】：

我也遇到了同样的问题。我使用了“带掩码的 ngx-datepicker”。我从输入中删除了 ngModel，它工作得非常好。

【讨论】：

【解决方案3】：

Rafael，我遇到了同样的问题，我的解决方案是将输入设置为只读，并允许用户仅使用日历选择日期。

<fieldset class="form-group">
  <label>End Date</label>
  <div class="input-group">
    <span class="input-group-addon" (click)="dpEndDate.toggle()">
      <i class="fa fa-calendar"></i>
    </span>
    <input readonly required [(ngModel)]="model.endDate" 
      type="text" class="form-control" id="endDate"
      name="endDate" ngbDatepicker #dpEndDate="ngbDatepicker">
  </div>
</fieldset>

【讨论】：

:) 有时候改变需求才是解决办法
我决定使用占位符来说明用户输入日期的方式。如果他输入类似 11/03/1992 我的表格将不允许他进入下一页。或者他使用“ - ”打字，或者他使用日历。