Угловой 2 аксессуар с несколькими настраиваемыми значениями

Я создаю приложение с использованием angular2.

Мне нужно получить дату из пользовательского ввода с помощью всплывающего окна календаря, но мне нужно поставить маску на пользовательский ввод, чтобы он оставался в этом формате дд-мм-ГГГГ, когда он печатает.

Я использую два разных модуля, которые я получил из Интернета: 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 в одном теге, я получаю эту ошибку

ОШИБКА: более одного средства доступа к настраиваемому значению соответствует элементу управления формы с неопределенным атрибутом имени.

Есть ли способ делать такие вещи?

Спасибо


angular ng-bootstrap angular2-directives maskedinput
person Rafael Andrade    schedule 05.06.2017    source источник
comment
какая угловая версия? попробуйте атрибут ngDefaultControl для вашего ввода.   -  person gcleite    schedule 06.06.2017
comment
Версия 2.4. Вы говорите не использовать ngModel? До сих пор не работает. Проблема в том, что я использую textMask и ngbDatepicker. Похоже, что Angular не может поддерживать две директивы из разных пакетов.   -  person Rafael Andrade    schedule 07.06.2017
comment
@RafaelAndrade - вы нашли решение для этого? У меня такая же проблема.   -  person Samir    schedule 25.11.2017

Ответы (3)


arrow_upward
3
arrow_downward

Я столкнулся с той же проблемой. Я использовал "ngx-datepicker with mask". Я удалил ngModel из ввода, и он работает абсолютно нормально.

person Akshay    schedule 25.12.2018

arrow_upward
3
arrow_downward

До сегодняшнего дня у него нет решения. Вот что я сделал, чтобы по-прежнему иметь возможность использовать ЗАМАСКИРОВАННЫЙ ВХОД и 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>
person Cauêh Q.    schedule 18.04.2019

arrow_upward
-3
arrow_downward

Рафаэль, у меня была такая же проблема, в моем решении вход был установлен только для чтения, и пользователь мог выбирать дату только с помощью календаря.

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

person hamilton.lima    schedule 16.08.2017
comment
:) иногда менять требования - это решение - person hamilton.lima; 31.08.2017
comment
Я решил использовать заполнитель с указанием того, как пользователь должен вводить дату. Если он напечатает что-то вроде 11.03.1992, моя форма не позволит ему перейти на следующую страницу. Или он печатает, используя "-", или использует календарь. - person Rafael Andrade; 27.11.2017