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);