Angular 如何将空值分配给日期选择器上的输入

Question

这是我的代码。我有一个日期选择器，它在我的应用程序中显示属性的特定日期。我希望日期选择器仅在 IsPrimerExists 为 true 时才显示该日期。如果不是真的，我希望它为空。现在，日期选择器对于这两种情况都是空的。我应该解决什么问题才能达到我想要的效果？

HTML:

<mat-form-field appearance="outline" *ngIf="!productionValue1">
    <mat-label>{{'İmalat Tarihi(' + Country1 +' '+Market1+')'}}</mat-label>
    <input matInput [matDatepickerFilter]="filterWeekend" [matDatepicker]="picker" [(ngModel)]="countryDate1"
        name="countryDate1">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

TS:

productionOrder: IProductionOrder = {};
constructor() {
        if (_dialogRef.id != "ProductionOrder") {
            this.productForms = _data;
            if (this.productForms && this.productForms.length > 0) {
                this.totalProducedAmount = this.productForms[0].TargetQuantity;
            }
            let i = 0;
            this.productForms.forEach((x) => {
                if (i == 0) {
                    this.countryCheck1 = x.IsPeriod;
                    this.CountryVisible1 = true;
                    this.Country1 = x.GeoType.Name; 
                    this.Market1 = x.MarketType.Name;
                    this.previousCheck1 = x.IsPreviousMonth;
                    this.productionValue1 =
                        _dialogRef.id == "ProductForm" ? true : false;
                        if(this.productionOrder.IsPrimerExists){
                            this.countryDate1 = x.ProductionDate;
                        }
                                else{
                                    this.countryDate1 = null;
                                }
                }
            i++
}

I生产订单：

IsPrimerExists?: boolean;

Answer 1

您可以在输入中使用定义的 formControl。

像这样：

<input matInput [matDatepickerFilter]="filterWeekend" [matDatepicker]="picker" [(ngModel)]="countryDate1"
    name="countryDate1">

然后TS改成这样：

this.countryDate1 = new Date(x.ProductionDate);

Angular 如何将空值分配给日期选择器上的输入

Angular How Can I Assign Null Value to Input on Date Picker

html

javascript

typescript

angular-material

angular