Mat AutoComplete Angular-CodePudding

I get the list but once type any of my data it gives me an error ERROR TypeError: Cannot read properties of null (reading 'valueChanges') how to fix this? i get the name of my form array and i think that's correct anyone can teach me or answer me.

filteredOptions:any;
options = [];



this.serviceLogForm = this.fb.group({
      id:[0],
      Name:[],
      ArrayForm:this.fb.array([this.CreateArray()])
    })

CreateArray(){
    return this.fb.group({
        item:['']
    })
  }

ngOninit{
this.ArrayForm.get('item').valueChanges.subscribe(response => {
      console.log('data is ', response);
      this.filterData(response);
    })
}

filterData(enterData){
    this.filteredOptions = this.options.filter(item => {
      return item.toLowerCase().indexOf(enterData.toLowerCase()) > -1
    })
  }

getData(){
  this.services.dataList(true).subscribe((response) => {
    this.options = response;
    this.filteredOptions = response;
    console.log(response)
  })
}

Here's my services where i map the items of my list and get the specific data

dataList(isActive: Boolean){
        let params = new HttpParams();
        params = params.append('isActive', String(isActive));
        return this.http.get(this.appsetting.baseURL   'myList/list',{params})
        .pipe(
          map((response:any) => response.items.map(items =>items['Name']))
        );
      }

CodePudding user response：

See api for FormArray.

ArrayForm is a FormArray, i.e. an array.

So you'll want something like

(this.ArrayForm.at(0) as FormGroup).get('item').valueChanges

i thought you need to declare in first in ngOninit(index) to call the at()

Your class has constructed the serviceLogForm when ngOnInit runs, so it has full structure:

this.serviceLogForm = this.fb.group({
    id:[0],
    Name:[],
    ArrayForm:this.fb.array([
        this.fb.group({ item:[''] }) // <--------- index 0 of array
    ])
})

Question to ask yourself - If you'll only ever have one form group in this array than why use a form array?

CodePudding user response：

The error comes from your ngOnInit function.

It seems you don't have a ArrayForm variable in your component.

But the real error comes from

this.ArrayForm.get('item').valueChanges

Where this.ArrayForm.get('item') is undefined. Try to resolve that.

CodePudding user response：

Your ArrayForm has no control with name item so this.ArrayForm.get('item') returns undefined.

As a side note, your variables are not everywhere correctly typed and variable names doesn't follow lover camel case.