Angular mat datepicker 手动输入日期不起作用

Question

我正在为我的日期选择器使用材料日期选择器。 我正在尝试手动输入日期

在我目前的情况下，我可以输入数字 1 日期为 01-JAN-2021

如果我输入数字 2 当我在值属性中分析代码时，日期被认为是 01-FEB-2021 我正在使用getData方法，所以当我更改日期时，它从getData方法获取的值的 rest

这是我的 HTML 代码

<mat-form-field>
    <input [disabled]="!enableEdit" (dateChange)="setChange(item2.dataName,'fpInDate')"
        matInput [matDatepicker]="i" placeholder="Choose a date"
        [value]="getData(item2.fpInDate)" name="{{i}}--{{n}}"
        [(ngModel)]="item2.fpInDate">
    <button mat-button *ngIf="item2.fpInDate" matSuffix mat-icon-button aria-label="Clear"
        (click)="item2.fpInDate=''">
        <mat-icon>close</mat-icon>
    </button>
    <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
    <mat-datepicker #i></mat-datepicker>
</mat-form-field>

获取数据方法：

getData(dates: any) {
   return new Date(dates);
}

SetChange 方法：

setChange(dataName, dateType) {
   this.dataChanged = true;
   this.designData.push({ 
       DataName: dataName, 
       dateType: dateType, 
       countryCode: this.dialogData.pageValue.countryCode
   });
}

我完全被困在这里，请指导我在这里做错了什么。

如果我从代码中删除 ngmodel，我可以看到日期并编辑日期，但问题是它没有在表中更新

Answer 1

如果有帮助，我成功使用的示例？ 我很惊讶你同时使用 [value] 和 [(ngModel)] ！

<mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
                                <mat-label>{{'GuLabel.dateLivraisonEstime' | translate}}</mat-label>
                                <input matInput 
                                [disabled]="!document.editable"
                                [matDatepicker]="pickerLivraison"
                                (input)="expedition.dateLivraison= $event.target.value;documentForm.markAsDirty()"
                                [value]="expedition.dateLivraison"
                                (dateChange)="expedition.dateLivraison = $event.value;documentForm.markAsDirty()"
                                >
                                <mat-datepicker-toggle matSuffix [for]="pickerLivraison"></mat-datepicker-toggle>
                                <mat-datepicker #pickerLivraison></mat-datepicker>
                               
</mat-form-field>