Angular 6: Not able to get the selected value on selectionChange event

Question

In my edit form i am not able to retrieve the values which are stored at the addition time. The flow is like when an option of the first select box is selected after that it's relevant data will be displayed in the next select box.

I have tried this answer for selected value but the values are not displaying.

I have a form as below:

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
    <mat-form-field">
      <mat-label>Main Type</mat-label>
      <mat-select [(value)]="selectedType" (selectionChange)="onTypeChange($event.value)"
        formControlName="mainTypeId">
        <mat-option *ngFor="let list of mainList" [value]="list.id">{{list.name}}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field">
      <mat-label>Sides Type</mat-label>
      <mat-select [(value)]="selectedSide" formControlName="sideTypeId">
        <mat-option *ngFor="let list of sidesList" [value]="list.id">{{list.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
</form>

EditProductComponent.ts

export class EditProductUploadImageComponent implements OnInit {
    public selectedType: any;
  public selectedSide: any;

  constructor(private fb: FormBuilder,
    private productService: ProductService) {
    this.formInitialization();
    this.getSelectedData()
  }

    getSelectedData() {
    this.productService.getProductDesignRef(this.data.editId).subscribe((response: any) => {
        this.refrences = response.data[0]
        console.log(this.refrences)
        this.productService.getMainListById(this.refrences.main_type_id).subscribe((response: any) => {
          this.selectedType = response.data[0].id
          this.getMainTypeList()
          if(response) {
            this.productService.getSidesListById(this.refrences.sides_type_id).subscribe((response: any) => {
              this.selectedSide = response.data[0].id
              this.onTypeChange(1)
            })
          }
        })
    })
  }

  getMainTypeList() {
    this.productService.getMainTypeList().subscribe((response: any) => {
      if (response) {
        this.mainList = response.data;
        console.log(this.mainList)
      }
    }
  }

  onTypeChange(value: number) {
    this.productService.getSidesTypeListById(value).subscribe((response: any) => {
      if (response) {
        this.mainTypeListById = response['data']['0']['sides-type'];
        this.sidesList = this.mainTypeListById
        console.log(this.sidesList)
      }
    }
  }
}

=> By using the reference ids i have passed a selected value in the form. But can not able to get proper output.

Pls review all console logs in this jsfiddle link

For more clarification pls review these two images regarding work flow.

1. Listing of the records: https://prnt.sc/rw2ucu ; while clicking on the edit button an edit window will be open and there i want that two listed values which are in the listing page for updating the records.
2. Edit dialog box: https://prnt.sc/rw2xeh

Thanks in advance...!!!

Answer 1

I just noticed that you are using reactive forms.

<!-- why are you using value and formControlName & why you passing $event.value in your method? -->
<mat-select 
   [(value)]="selectedType" 
   (selectionChange)="onTypeChange($event.value)"
   formControlName="mainTypeId"
>

<!-- when you are using reactive forms you can just access mainTypeId in your onTypeChange method -->
<mat-select 
   (selectionChange)="onTypeChange()"
   formControlName="mainTypeId"
>

// your method
onTypeChange() {
   // your access mainTypeId here directly like this
   const mainTypeId = this.yourFormName.get('mainTypeId').value;
}

You can easily handle your edit case my using [compareWith] if the above doesn't work for your edit case.

AND IF YOU WERE NOT USING REACTIVE FORM:

1. First thing is that I can not see any use of value in your onTypeChange method.
2. In here (selectionChange)="onTypeChange($event.value)" you don't have to pass $event.value because for the value you are already setting in selectedType
3. You just need to access in this.selectedType in your onTypeChange method

If it's unclear please comment I'll get back to you.

Answer 2

You cannot use [(value)] and formControlName on same material component. It do not behave.

And update this.selectedType = response.data[0].name to this.selectedType = response.data[0].id in your getSelectedData function

You are not using selected value in function onTypeChange

onTypeChange(value: number) {
  this.productService.getSidesTypeListById(1).subscribe((response: any) => {
     if (response) {
       this.mainTypeListById = response['data']['0']['sides-type'];
       this.sidesList = this.mainTypeListById
       console.log(this.sidesList)
     }
   }
}

You have to use value to see impact.