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

Question

Here is my code. I have a date picker where it shows a certain date for a property in my app. I want the date picker to show that date only if, IsPrimerExists is true. If it's not true, I want it to be null. Right now, the date picker is null for both conditions. What should I fix to achieve what I want?

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++
}

IProductionOrder:

IsPrimerExists?: boolean;

As any input with [(ngModel)]: this.countryDate1=null. NOTE: Remember that to asign a value you need give a Javastring Date object. NOTE2 the type of your variable should be "any":countryDate:any — Eliseo
– Eliseo, Commented Jul 6, 2021 at 8:14

Naeem_VE · Accepted Answer · 2021-07-06 08:40:45Z

1

You can use formControl defined and in your input.

Like this:

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

And TS change to this:

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

edited Jul 6, 2021 at 8:40

answered Jul 6, 2021 at 7:46

Naeem_VE

923 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Rocket Monkey Over a year ago

Thanks, but changing the HTML like made date picker disappear.

Naeem_VE Over a year ago

what the type of x.ProductionDate?? is this a string date??

Rocket Monkey Over a year ago

It's of type Date

Naeem_VE Over a year ago

Okay . Then you don't need to do this [(ngModel)]="countryDate1.value" try [(ngModel)]="countryDate1" this only. and this.countryDate1 = new Date(x.ProductionDate); Remove new Date as its already Date. just use x.ProductionDate. And also remove formControlName="countryDate1"

Naeem_VE Over a year ago

Edited in StackBlitz : stackblitz.com/edit/…

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related