无法分配给“fromDate”，因为它是只读属性。ts

Question

I'm using angular 12 . I have 2 DatePickers and they are inside form .Each DatePicker has small X button. I want that when i press on it,it clears input in DatePicker.But when i try to clear it this way: this.fromDate=null this error comes: Cannot assign to 'fromDate' because it is a read-only property.ts. I tried function this.fromDate.setValue() but it says that function doesn't exist. Anything else I found that mentions this error they suggest what i mentioned before or something that i can't do since this is in form.
Also tried this.filterForm.reset() but it resets both Datepickers since they are in group.

Here is my code:

this is my html code

<div class="title-group" >
   <h1 class="mat-h1" >Popis vožnji</h1>
 </div>

 <div >
   <mat-divider fxFlex="1 0"></mat-divider>

 </div >
 <div>
 <mat-form-field appearance="standard">
   <mat-label>Filter</mat-label>
   <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Lift0" #input>
 </mat-form-field>
 </div>
 <div  >
 <form [formGroup]="filterForm">
     <mat-form-field class="example-form-field1">
       <input matInput  


         [matDatepicker]="fromDate" 
         placeholder="From Date" 
         formControlName="fromDate">
         <button *ngIf="fromDate" matSuffix mat-icon-button aria-label="Clear" (click)="clearFromDate()">
           <mat-icon matDatepickerToggleIcon >close</mat-icon>
         </button>
       <mat-datepicker-toggle matSuffix [for]="fromDate"></mat-datepicker-toggle>
       <mat-datepicker #fromDate></mat-datepicker>
     </mat-form-field>
    
     <mat-form-field class="example-form-field1">
       <input matInput  
      
         [matDatepicker]="toDate" 
         placeholder="To Date" 
         formControlName="toDate">
         <button *ngIf="toDate" matSuffix mat-icon-button aria-label="Clear" (click)="clearToDate($event)">
           <mat-icon matDatepickerToggleIcon >close</mat-icon>
         </button>
       <mat-datepicker-toggle matSuffix [for]="toDate"></mat-datepicker-toggle>
       <mat-datepicker #toDate></mat-datepicker>

     </mat-form-field>
    <button mat-button color="primary" (click)="applyFilterDate()">Pretraži</button>
 </form>
 </div>
</div>

this is my ts code

export class IspisPutovanjaComponent implements OnInit {
 
 id :string|null;
 LiftData: any = [];
 dataSource!: MatTableDataSource<Putovanje>;
 @ViewChild(MatPaginator)
 paginator!: MatPaginator;

 @ViewChild(MatSort)
 sort!: MatSort;
 displayedColumns: any[] = [
   'n_k',
   'v_k',
   'p_k',
   'z_k',
   'start_time',
   'end_time',
   'count_p'
 ];
 //
 pipe: DatePipe;

 filterForm = new FormGroup({
   fromDate: new FormControl(),
   toDate: new FormControl(),
});



 get fromDate() { return this.filterForm.get('fromDate')!.value; }
  get toDate() { return this.filterForm.get('toDate')!.value; }
 constructor(private travel_service: PutovanjeService,private actRoute: ActivatedRoute) {
   this.id = this.actRoute.snapshot.paramMap.get('id');
   this.dataSource= new MatTableDataSource();
   this.pipe = new DatePipe('en');
  

  }
 ngOnInit(): void {
   this.LiftData = [];

   this.retrieveLifts();
 }


 applyFilter(event: Event) {
   const filterValue = (event.target as HTMLInputElement).value;
   this.dataSource.filter = filterValue.trim().toLowerCase();
   if (this.dataSource.paginator) {
     this.dataSource.paginator.firstPage();
   }
 }

 //

applyFilterDate() {

 this.dataSource.data=this.LiftData.filter( (data: { start_time: string | number | Date; end_time: string | number | Date; })=>{

   if (this.fromDate && this.toDate) {
     return this.pipe.transform(data.start_time,'shortDate')! >= this.pipe.transform(this.fromDate,'shortDate')! && this.pipe.transform(data.end_time,'shortDate')! <=  this.pipe.transform(this.toDate,'shortDate')!;
     }
 return true;
  }
 );

}
clearFromDate() 
{
 this.fromDate=null;

}
clearToDate(event: { stopPropagation: () => void; }){
 event.stopPropagation();
 this.dataSource.data=this.LiftData;
 

}

}

Answer 1

you has a template reference variable the: "#fromDate" in your

<mat-datepicker #fromDate ..>

With the same name than you getter

get fromDate(){..}

Just change the first from some like <mat-datepicker #fromDateID..>

See that, in this case the toogle button becomes like <mat-datepicker-toggle [for]="fromDateID">...