Partage
  • Partager sur Facebook
  • Partager sur Twitter

RROR TypeError: Cannot read property 'selectedInde

ng-select

KingPierre
    3 mars 2021 à 20:41:56

    **Hi community!!** ***Please help me find the solution***
    [![enter image description here](https://i.stack.imgur.com/ToTuP.jpg)](https://i.stack.imgur.com/ToTuP.jpg)
    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](https://i.stack.imgur.com/ToTuP.jpg)](https://i.stack.imgur.com/ToTuP.jpg)
    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'
          })
        });
      }
    }
    • Partager sur Facebook
    • Partager sur Twitter

    RROR TypeError: Cannot read property 'selectedInde

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur ●
    • Markdown