Question

mat-datepicker存在一个已知问题，但是该解决方案对我而言并不完美，因为根据网站当前选择的语言，我有不同的日期格式。

Angular Material 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
   ) { }

具有自动完成功能的Angular Material DatePicker用户输入错误

0 个答案: