CODEWITHSUNDEEP
angularasynchronouspipe
rajesh
rajesh

Reputation: 21

Angular 7 ERROR TypeError: Cannot read property 'pipe' of undefined

Hi am very new to angular was trying to implement autocomplete using customfilters was getting this error related to pipe was not able find a solution from past 3 days.. can someone pls help me with this 

<mat-form-field class="col-12 col-sm-6">
    <mat-label class="padding">Units</mat-label>
    <mat-select formControlName="unit" [(value)]="selected"  required style="padding-left: 10px;">
        <mat-option *ngFor="let list of unitsList | async" [value]="list.codename">{{list.codevalue}}</mat-option>
    </mat-select>
    <mat-error *ngIf="getvalue1.unit.errors">{{getunitErrorMessage()}}</mat-error>
</mat-form-field>

my ts file:

 ngOnInit() {
    //
    this.projectservice.getInventoryProjectsList().subscribe(
      data => {
       this.projectsList2 = data;
      }
    );

    // for inventory dropdown
    this.inventory.getInvDropdown().subscribe(
      data => {

        this.unitsList = data['units'];
        console.log(this.unitsList);
        // tslint:disable-next-line:no-string-literal

      }
    );
    this.formBuilderOnDemand();
    this.filter();

  }
  // // for filter
  filter() {
    this.filteredOptions = this.addInventoryForm.value.itemName.valueChanges
    .pipe(    // Error line 
      startWith(''),
      map(value => this._filter(value))
    );
  }

  // for search in item name
  private _filter(value: any): any[] {
    const filterValue = value.toLowerCase();
    return this.materialList.filter(list => list.toLowerCase().includes(filterValue));
  }

Upvotes: 0

Views: 3338

Answers (3)

Tet Nuc
Tet Nuc

Reputation: 29

Use mat-autocomplete directive

https://material.angular.io/components/autocomplete/overview

HTML:

<mat-form-field>
    <input tabindex="-1"
    type="text"
    matInput
    placeholder="Search..."
    #unitsInput
    [formControl]="unit"
    [matAutocomplete]="unitAuto">
    <mat-autocomplete
    autoFocus=false
    (optionSelected)="utitSelected($event)"
    #unitAuto="matAutocomplete">
        <mat-option
        [attr.disabled]="false"
        *ngFor="let list of filteredOptions | async"
        [value]="list.codename"
        >
            <span class="options_span">
                {{list.codename}}
            </span>
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

ts file:

.....
@ViewChild('chipInput') chipInput: { nativeElement: { value: string; }; };

unit = new FormControl();

.....

ngOnInit() {
    //
    this.projectservice.getInventoryProjectsList().subscribe(
    data => {
    this.projectsList2 = data;
    }
    );

    // for inventory dropdown
    this.inventory.getInvDropdown().subscribe(
    data => {

        this.unitsList = data['units'];
        console.log(this.unitsList);
        // tslint:disable-next-line:no-string-literal

    }
    );
    this.formBuilderOnDemand();
    this.filteredOptions = this.unit.valueChanges
        .pipe(    // Error line 
        startWith(''),
        map(value => this._filter(value))
        );
}

    // for search in item name
private _filter(value: any): any[] {
    const filterValue = value.toLowerCase();
    return this.unitsList.filter(list => list.toLowerCase().includes(filterValue));
}
    }


        utitSelected(event: MatAutocompleteSelectedEvent): void {
        this.unitsInput.nativeElement.value = '';
        this.unit.setValue('');
    }

Upvotes: 0

maury844
maury844

Reputation: 1250

You're using unitsList | async on your HTML, but unitsList is already an Array, the async pipe is intended to be used on asynchronous types (i.e. Observable or Promise)

Not sure this will fully make your code work but I think this will fix the error you're getting right now

EDIT

From your edit, you´re trying to subscribe to (what I think is) the value of a FormControl, you need to subscribe to the FormControl's value changes.

this.myForm.get('myFormControl').valueChanges.subscribe(val => {
  //Do something when "myFormControl" value changes
});

Upvotes: 1

Tet Nuc
Tet Nuc

Reputation: 29

Did you import startWith from RxJS?

import {map, startWith} from 'rxjs/operators';

You have to add it to your ts file.

Upvotes: 0

Related Questions