find function isn't working properly in angular and firebase

enter image description here

when im enter the find id and data set isn't set on this fields and this error occured in my console .

the below code shows findexpense code snippets

import { Component } from '@angular/core';
import {ExpensesService} from "../../Expenses.service";
import {FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-find-expenses-data',
  templateUrl: './find-expenses-data.component.html',
  styleUrls: ['./find-expenses-data.component.scss']
})
export class FindExpensesDataComponent {
  constructor(private service:ExpensesService) {
  }

  expenseDataform=new FormGroup({
    title:new FormControl('',Validators.required),
    des :new FormControl('',Validators.required),
    cost :new FormControl(0,Validators.required)
  });
  findData(){

    this.service.finddatabyid(this.expenseDataform.get('id')?.value!)
      .subscribe(response => {
        this.expenseDataform.patchValue({
          title:response.title,
          des:response.des,
          cost:response.cost,
        });
        },error => {
      console.log(error);
    })
  }
}

and this is the servise.ts file

  finddatabyid(id:string):Observable<any>{
  return this.store.doc(`expense/${id}`).valueChanges({idField:'id'});
  }

and finally this is my html file

<form [formGroup]="expenseDataform">
  <div class="container">
    <div class="column">

      <div class="col-3">
        <div class="form-group">
          <label for="id"id="id">ID</label>
          <input (keyup.enter)="findData()"  type="text"class="form-control"formControlName="id">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="title"id="title">Title</label>
          <input type="text"class="form-control"formControlName="title">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="des"id="des">Description</label>
          <input type="text"class="form-control"formControlName="des">
        </div>
      </div>

      <div class="col-3">
        <div class="form-group">
          <label for="cost"id="cost">Cost</label>
          <input type="number"class="form-control"formControlName="cost">
        </div>
      </div>
    </div>
  </div>

</form>

my saving function is working properly but this finding function does not working.i am fresher for this field could anyone help me please .

Thank you,

Your expenseDataform is missing the form control for id. Modifying it as below should solve the error

expenseDataform=new FormGroup({
    id: new FormControl('',Validators.required),
    title: new FormControl('',Validators.required),
    des: new FormControl('',Validators.required),
    cost: new FormControl(0,Validators.required)
  });