Ошибка ввода пользователем углового материала DatePicker при автозаполнении - PullRequest
Новая
       9

Ошибка ввода пользователем углового материала DatePicker при автозаполнении

0 голосов
/ 24 июня 2019

Существует уже известная проблема с mat-datepicker, но решение не работает для меня идеально, потому что я получил разные форматы даты в зависимости от текущего выбранного языка веб-сайта.

Угловой материалDatePicker Autocomplete

Так что это «решение», которое было дано для меня.Я хочу, чтобы пользователь мог также вводить дату, а не просто использовать datePicker, потому что почему должно быть поле ввода, которое не работает.Но да, как и в предыдущем вопросе:

Пример: если я найду элемент с 1234 и потерю фокуса поискового ввода, он завершится 01.01.1234 и проведет исследование с ним ...

С этим решением я могу ввести все в поле ввода.Но если я ввожу что-то не так, консоль браузера записывает в журнал: 

ERROR Error: InvalidPipeArgument: 'Unable to convert "27.08.1999" into a date' for pipe 'DatePipe'

Но форма не показывает никакой ошибки, как будто все идеально, потому что она не проверена.Другая проблема, связанная с решением, приведенным выше, заключается в том, что любой элемент выбора даты заканчивается в этом формате 10/11/2005, но я хочу иметь немецкий формат dd.MM.YYYY

Обратите внимание, что моя версия уже содержит изменения решениявыше.

StackBlitz : https://stackblitz.com/edit/angular-o5k42x

HTML : 

 <mat-form-field class="field-sizing">
   <input matInput #autocomplete required [max]="globals.currentDate"
     placeholder="{{ 'REGISTRATION.DATEOFBIRTH' | translate }}" name="dateOfBirth"
     formControlName="dateOfBirth"
     [ngClass]="{ 'is-invalid': g.dateOfBirth.touched && g.dateOfBirth.errors }" />
   <mat-datepicker-toggle matSuffix [for]="dateOfBirthPicker"></mat-datepicker-toggle>
   <mat-datepicker #dateOfBirthPicker startView="multi-year" [startAt]="startDate"></mat-datepicker>
   <mat-error class="invalid-feedback"
     *ngIf="g.dateOfBirth.touched && g.dateOfBirth.errors && g.dateOfBirth.errors.required">
     {{ 'REGISTRATION.DATEOFBIRTH' | translate }} {{ 'VALIDATION.REQUIRED' | translate }}
   </mat-error>
 </mat-form-field>


 <input type="hidden" [matDatepicker]="dateOfBirthPicker"
   (dateChange)="autocomplete.value = toFormattedDate($event.value)">

TypeScript :

   public personalForm: FormGroup;

   get g() {
     return this.personalForm.controls;
   }

   ngOnInit() {
     this.buildForm();
   }

   public buildForm() {
     this.personalForm = this.form.group({
       dateOfBirth: ['', [Validators.required]],
     })
   }

   toFormattedDate(iso: string) {
     const date = new Date(iso);
     console.log(date);
     return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
   }

  constructor(
     public form: FormBuilder
   ) { }
...