RROR TypeError: Cannot read property 'selectedIndex' of undefined

Hi community!! Please help me find the solution
I do a filtered search from ng-select of angular in return, it gives me the expected result of the search
but I have defined a loading method to automatically fill in the data related to the search found with ng-select, in the pu, qte field … I have the error and it does not load the data related to the element
I point out that with simple select it works with the drop-down list, but I don’t want the drop-down list, the search must be automatic, that’s why I preferred to use angular’s ng-select
this is my ts component

export class AddLcommComponent implements OnInit {
  formData: FormGroup;
  articleList:Article[];
  isValid:boolean=true;
  wtotht = 0;
  wtottva = 0;
  wtotttc = 0;
  selected = [];


  constructor( public service:LcommandeService,private toastr :ToastrService,
        @Inject(MAT_DIALOG_DATA)  public data,
        public dialogRef:MatDialogRef<AddLcommComponent>,
        private articleService:ArtcileService,
        private commandeService:CommandeService,public fb: FormBuilder){}
        get f() { return this.formData.controls; }
       

  ngOnInit() {
    if(this.data.lcommandeIndex==null)
    {
      this.InfoForm();
    }
    else 
    {
     this.formData =this.fb.group(Object.assign({},this.commandeService.list[this.data.lcommandeIndex]));
    }
   this.articleService.listAllArticle().subscribe(
      response =>{this.articleList= response;}
     );
}


InfoForm() {
  this.formData = this.fb.group({
      id: null,
      numero :this.data.numero,
      qte : 0,
      pu : 0,
      tva : 0,
      totht : 0,
      tottva :0,
      totttc :0,
      libart :'',
      code_article :'',
      comm_id : this.data.id_commande,
      
    });
  } 
selectPrice(ctrl){
  if(ctrl.selectedIndex == 0){
    this.f['pu'].setValue(0);
    this.f['tva'].setValue(0);
    this.f['libart'].setValue('');
    this.f['qte'].setValue(0);
  }
  else{
    this.f['pu'].setValue(this.articleList[ctrl.selectedIndex-1].pv);
    this.f['tva'].setValue(this.articleList[ctrl.selectedIndex-1].tva);
    this.f['libart'].setValue(this.articleList[ctrl.selectedIndex - 1].libelle);
    this.f['code_article'].setValue( this.articleList[ctrl.selectedIndex - 1].code);
  }
  this.cal();
}
cal(){
  this.wtotht =  parseFloat((this.formData.value.qte * this.formData.value.pu).toFixed(3));
  this.wtottva = parseFloat(((this.wtotht * this.formData.value.tva)*0.01).toFixed(3)); 
  this.wtotttc = parseFloat((this.wtotht + this.wtottva).toFixed(3));
  this.f['totht'].setValue(this.wtotht);
  this.f['tottva'].setValue(this.wtottva);
  this.f['totttc'].setValue(this.wtotttc);
}

onSubmit() {
  if(this.data.lcommandeIndex==null)
  {
    this.commandeService.list.push(this.formData.value)
    this.dialogRef.close();
  }
  else
{
  this.commandeService.list[this.data.lcommandeIndex] = this.formData.value;
}
this.dialogRef.close();
}

validateForm(formData:Lcommande){
  this.isValid=true;
  if(formData.code =='')
    this.isValid=false;
    else if(formData.qte ==0)
    this.isValid=false;
    return this.isValid;
}



}

Hi community!! Please help me find the solution

enter image description here

I do a filtered search from ng-select of angular in return, it gives me the expected result of the search

but I have defined a loading method to automatically fill in the data related to the search found with ng-select, in the pu, qte field … I have the error and it does not load the data related to the element

I point out that with simple select it works with the drop-down list, but I don’t want the drop-down list, the search must be automatic, that’s why I preferred to use angular’s ng-select

this is my ts component

export class AddLcommComponent implements OnInit {
  formData: FormGroup;
  articleList:Article[];
  isValid:boolean=true;
  wtotht = 0;
  wtottva = 0;
  wtotttc = 0;
  selected = [];

  constructor( public service:LcommandeService,private toastr :ToastrService,
        @Inject(MAT_DIALOG_DATA)  public data,
        public dialogRef:MatDialogRef<AddLcommComponent>,
        private articleService:ArtcileService,
        private commandeService:CommandeService,public fb: FormBuilder){}
        get f() { return this.formData.controls; }       

  ngOnInit() {
    if(this.data.lcommandeIndex==null)
    {
      this.InfoForm();
    }
    else 
    {
     this.formData =this.fb.group(Object.assign({},this.commandeService.list[this.data.lcommandeIndex]));
    }
   this.articleService.listAllArticle().subscribe(
      response =>{this.articleList= response;}
     );
}

InfoForm() {
  this.formData = this.fb.group({
      id: null,
      numero :this.data.numero,
      qte : 0,
      pu : 0,
      tva : 0,
      totht : 0,
      tottva :0,
      totttc :0,
      libart :'',
      code_article :'',
      comm_id : this.data.id_commande,
      
    });
  } 
selectPrice(ctrl){
  if(ctrl.selectedIndex == 0){
    this.f['pu'].setValue(0);
    this.f['tva'].setValue(0);
    this.f['libart'].setValue('');
    this.f['qte'].setValue(0);
  }
  else{
    this.f['pu'].setValue(this.articleList[ctrl.selectedIndex-1].pv);
    this.f['tva'].setValue(this.articleList[ctrl.selectedIndex-1].tva);
    this.f['libart'].setValue(this.articleList[ctrl.selectedIndex - 1].libelle);
    this.f['code_article'].setValue( this.articleList[ctrl.selectedIndex - 1].code);
  }
  this.cal();
}
cal(){
  this.wtotht =  parseFloat((this.formData.value.qte * this.formData.value.pu).toFixed(3));
  this.wtottva = parseFloat(((this.wtotht * this.formData.value.tva)*0.01).toFixed(3)); 
  this.wtotttc = parseFloat((this.wtotht + this.wtottva).toFixed(3));
  this.f['totht'].setValue(this.wtotht);
  this.f['tottva'].setValue(this.wtottva);
  this.f['totttc'].setValue(this.wtotttc);
}

onSubmit() {
  if(this.data.lcommandeIndex==null)
  {
    this.commandeService.list.push(this.formData.value)
    this.dialogRef.close();
  }
  else
{
  this.commandeService.list[this.data.lcommandeIndex] = this.formData.value;
}
this.dialogRef.close();
}

validateForm(formData:Lcommande){
  this.isValid=true;
  if(formData.code =='')
    this.isValid=false;
    else if(formData.qte ==0)
    this.isValid=false;
    return this.isValid;
}



}

my html component

<h1 class="dislay-4">Commande </h1>
<hr>
<form [formGroup]="this.formData"  (ngSubmit)="onSubmit()">
    <input type="hidden" class="form-control" formControlName="id" id="id">
    <input type="hidden" class="form-control" formControlName="libart" id="libart">
    <div class="form-group">
      <label>Article </label>
    <ng-select 
    placeholder="Taper le nom  du Produit"
    multiple = "true"
    maxSelectedItems=1
    class="form-control" formControlName="code_article" id="code_article"
        (change)="selectPrice($event.target)">
      <ng-option *ngFor="let item of articleList" value="{{item.code}}">
        {{item.libelle}}    
      </ng-option>
    </ng-select>
    </div>
    <br/>
    <br/>
    <div class="form-group">
    <label>Prix Unitaire </label>
    <div class="input-group">
          <input class="form-control" formControlName="pu" id="pu" (keyup)="cal()"
          [class.is-invalid]="!isValid && formData.value.pu==0" >
    </div>
  </div>
    <div class="form-group">
       <label>Quantité</label>
      <div class="input-group">
        <input name="qte"  class="form-control" formControlName="qte" id="qte" (keyup)="cal()"
        [class.is-invalid]="!isValid && formData.value.qte==0">
      </div>
    </div>

model

export class Article {

    id: number;

    code: string;

    libelle: string;

    pa : number;

    pv : number;

    tva: number;

    stkinit : number;

    code_categ : string;  

    casier : string;

    comment: string ;

    maison_production : string;

    type_emballage : string;

     createAt : Date;

     expirationdate : Date;

   

   

}

my service article

export class ArtcileService {

  private baseUrl = '/api/article';

  private baseUrlP = '/api/printProduct';

  choixoperation: string = 'A';

  public dataForm: FormGroup;

listD : Article[] ;

list :  any=[];

  constructor(private http: HttpClient) { }

  getData(id: number): Observable<Object>{

    return this.http.get(`${this.baseUrl}/${id}`);

  }

    

  createArticle(infos: Object): Observable<Object>{

    return this.http.post(`${this.baseUrl}`, infos);

  }

      

  updateArticle(id: number,  value: any): Observable<Object>{

    return this.http.put(`${this.baseUrl}/${id}`, value);

  }

    

  delete(id: number): Observable<any>{

    return this.http.delete(`${this.baseUrl}/${id}`, {responseType: 'text'});

  }

  listAllArticle(): Observable<any>{

    return this.http.get(`${this.baseUrl}`);

   }

  printRecapArticle = (report: Report): Observable<StrintResltat>=>{

   const data  = JSON.stringify(report);

   const urlSend = this.baseUrl;

    return this.http.post<StrintResltat>(urlSend, data,{

      headers: new HttpHeaders({

        'Content-Type' : 'application/json'

      })

    });

  }

}

Are you sure that $event is a regular event? I skimmed over the docs and it seems that it’s not.
Try passing just $event on change and log it in the event handler to see what gets passed.