Angular - ввод с помощью ngx-маски MatDatepicker и реактивной формы

Я хотел бы добавить элемент управления реактивной формой над формой, и возникает ошибка:

Более одного средства доступа к настраиваемому значению соответствует элементу управления формы с неопределенным атрибутом имени

Все работает отдельно, проверка реактивной формы, маска или matDatepicker, любая комбинация пар также работает, но все три вместе вызывают ошибку.

Вот мой код:

В component.ts

formGroup = new FormGroup({
    date: new FormControl()
  });

В component.html

    <mat-form-field>
      <input type="text" matInput [matDatepicker]="date_picker" mask="d0/M0/0000" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="date_picker"></mat-datepicker-toggle>
      <mat-datepicker #date_picker></mat-datepicker>
    </mat-form-field>

Я использую:

"@angular/cli": "8.3.19"
"ngx-mask": "8.1.7"
"@angular/material": "8.2.3"

angular angular-material angular-reactive-forms mat-datepicker ngx-mask
person Naw31    schedule 23.03.2020    source источник
comment
Вот StackBlitz моей проблемы: stackblitz.com/edit/angular-dcmk8w   -  person Naw31    schedule 24.03.2020

Ответы (2)


arrow_upward
1
arrow_downward

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

Я использовал упомянутый обходной путь с vanilla-text-mask в качестве временного (я надеюсь) решения, но в вышеупомянутом потоке нет активности, поэтому ... Вот ссылка на обходной путь: Используйте более одного CustomValueAcessor в одном поле ввода

Надеюсь, это поможет!

person capricaSix    schedule 08.06.2020
comment
Можете ли вы указать на самое важное содержание второй ссылки (той части, которая вам помогла)? - person Stef Geysels; 08.06.2020
comment
Я написал аналогичную директиву с небольшими изменениями, которые мне потребовались для моего кода: github.com/ angular / angular / issues / 16755 # issuecomment-365045055 Затем, если вы немного прокрутите вниз, есть ошибка, которая возникла и у меня (лишний символ в конце). В образце кода в этом ответе это исправлено: github.com/angular/angular/issues / 16755 # issuecomment-375330165 Я знаю, что это немного взломано, но это лучшее решение, которое я нашел. - person capricaSix; 08.06.2020

arrow_upward
0
arrow_downward

Мое решение:

1 - Создайте дополнительный замаскированный ввод под полем даты, привязав его значение к вводу даты с помощью NgModel. (Не используйте директиву matInput для маскированного ввода!)

 <input #dateInput matInput formControlName="control"  [matDatepicker]="picker" etc.../>
 <input #maskedInput [(ngModel)]="dateInput.value" mask="00/00/0000" [dropSpecialCharacters]="false" etc.../>

2 - Скрыть ввод даты с помощью css:

input:first-child {
  height: 0;
  width: 0;
  overflow: hidden;
}

3 - Ретрансляция событий фокуса с ввода даты на замаскированный ввод

<input #dateInput (focus)="maskedInput.focus()" etc...>
<input #maskedInput etc...>

4 - Релейные входные события с маскированного входа на вход даты

<input #dateInput etc.../>
<input #maskedInput (input)="dispatch(dateInput)" etc.../>

5 - Создайте функцию отправки в компоненте ts

dispatch(input: HTMLInputElement){
    input.dispatchEvent(new Event('input'));
}

Рабочая демонстрация: https://stackblitz.com/edit/angular-ivy-gyy1i4?file=src%2Fapp%2Fapp.component.ts

person Guilherme Meinlschmiedt Abdo    schedule 04.12.2020