.NET service not being called on mat-select selectionChange Event

Question

I have 3 drop downs on a page (which are loaded from an API call) and I need to call a different API service from one DD on the selectionChange event in which I use the value from the DD to bring back the model/data I need in order to populate/set an input field. The Angular code captures the value which I need and when calling the API service, the service is not being called (.NET API in debug mode).

For testing purposes, I've removed the forkJoin and used only 1 dropdown and it works (.NET API service is called in debug mode), but when I introduce the other drop downs with the forkJoin, it doesn't work. Not sure why, any help is much appreciated. I've also added it to the ForkJoin and if I make it a drop down for testing purposes, it works with no problems.

    <mat-form-field fxFlex="30">
          <mat-select formControlName="column1" placeholder="column1" (selectionChange)="onChange($event)" >
              <mat-option>Clear</mat-option>
              <mat-option *ngFor="let column1 of column1$ | async[value]="column1._id">{{ column1.title }}</mat-option>
          </mat-select>
          <mat-error*ngIf="submissionStatusForm.get('column1').hasError('required')">column1 is<strong>required</strong></mat-error>
        </mat-form-field>

 <mat-form-field fxFlex="30">
            <input matInput placeholder="Column2" formControlName="column1" />
        </mat-form-field>

export class AddTestComponent1 implements OnInit {
  headers: string[];
  submissionStatusForm: FormGroup;
  matcher = new FormErrorStateMatcher();
  isUpdateOperation: boolean;
  isSubmited: boolean;
  control: AbstractControl;
  column1$: any;
  column2: any;
  column3: any;
  column4: any;

constructor(
    @Inject(MAT_DIALOG_DATA) data,
    private fb: FormBuilder,
    private activatedRoute: ActivatedRoute,
    private dialog: MatDialog,
    private dialogRef: MatDialogRef<AddTestComponent1>,
    private utilityService: UtilityService,
    private localStorageService: LocalStorageService,
    private apiService: ApiService,
    public userAccessService: UserAccessService
  )
  {
    this.submissionStatusForm = this.fb.group({
      column1: fb.control(null, 
      {validators: [Validators.required],
      updateOn: 'blur',
      }),
      column2: fb.control(null
      ),
      column3: fb.control(null, 
         {validators: [Validators.required],
        updateOn: 'blur',
      }),
      column4: fb.control(null, 
        {validators: [Validators.required],
        updateOn: 'blur',
      }),
    });

    this.loadDropDowns();

  }
}

loadDropDowns()
  {
    this.column1$ = this.apiService.getAll(this.headers,API_NAME_COLUMN_1);
    forkJoin(
      this.apiService.getAll(this.headers, API_NAME_COLUMN_3),
      this.apiService.getAll(this.headers, API_NAME_COLUMN_4)
    ).subscribe(([column3, column4]) => {
      this.column3 = column3;
      this.column4 = column4;
    }, (error) => this.error_handle(`Unable to load data`));
   }

onChange(args)
  {
    const data: any = {
          Id_1: args.value,
          Id_2: 1
        };
    this.column2 = this.apiService.getName(this.headers, API_NAME, data);
    this.submissionStatusForm.patchValue({'column2':this.column2.label});
  }

Expected results should be the text needed from the web service, but the API service is not being called. I've Inspected the code and can't seem to see any error messages, but will continue to debug and investigate. Thanks for your help on this.

score 0 · Answer 1 · answered Sep 19 '19 at 17:31

0

try to use onSelectionChange, not selectionChange it may help :)

(https://stackoverflow.com/a/50617063/2929192)

answered Sep 19 '19 at 17:31

tgralex

794
4
14

If I use onSelectionChange, it calls the method but when I change it to selectionChange it doesn't call it at all (using Chrome Debugger in VS Code). Thanks for your help. – William Sep 19 '19 at 17:51
I think it because it expects `onSelectionChange` property for the method to call. – tgralex Sep 19 '19 at 18:10
I've tried this: (onSelectionChange)="onChange($event.value)", onChange(value) {....}, but no cigar. Thanks – William Sep 19 '19 at 18:34
is `apiService.getName` synchronous call and returns a value? Usually you assign variable a return value on successful execution. Maybe try to assign a test value there instead of your API call and see if you see it. I mean maybe it calls the method, but doesn't really do anything since async nature. – tgralex Sep 19 '19 at 19:00
See comments below. Thank you. – William Sep 20 '19 at 14:27
Doing more research and testing, just to add to my original comments above 'works with one drop down', API is called if the second control is mat-select, not an input control (cannot bind object to input control it seems, kinda makes sense). Being new to Angular and Web API's, what would be the best way then to make an API call, return the data needed (in this case all I need is a name based on the selected value in the drop down list) and set a text/input field based on the return value? I'll look at trying to fill a 'Model' class in Angular and populate the text/input field with Model.name. – William Sep 20 '19 at 14:37
That being said, with the second drop down being a mat-select and being populated properly based on the first drop down value, I would like to set second drop down to its text value, but I can't seem to get it to work, comes up blank but if I select the column, the value is there. I have tried: this.column2 = this.apiService.getName(this.headers, API_NAME, data); this.submissionStatusForm.patchValue({'column2':this.column2._id}); this.submissionStatusForm.setValue({'column2':this.column2._id); Thank you and sorry for the confusion. – William Sep 20 '19 at 14:37

score 0 · Answer 2 · answered Sep 20 '19 at 15:37

0

In order for the API to be called, I had to change the second field to a mat-select and add ' | async ' to the ngFor:

*ngFor="let class of column2Test$ | async"....

The only problem I'm having now is I would like to display the text on the column2 drop down. The field is populated but I have to click on the field to see the value. I've found patchValue, setValue but those don't work.

this.column2Test$ = this.apiService.getName(this.headers, API_NAME, data);
this.submissionStatusForm.patchValue({'column2':this.column2Test$.label});
this.submissionStatusForm.setValue({'column2':this.column2Test$.label);

Thanks

answered Sep 20 '19 at 15:37

William

21
9

patch and set probably dont work because you are setting using objects with a proper compareWith set. See https://material.angular.io/components/select/api compareWith. – Curtis Nov 14 '19 at 16:43
I will look into it. Thanks – William Nov 23 '19 at 18:09
without* a proper compareWith – Curtis Nov 25 '19 at 18:51

.NET service not being called on mat-select selectionChange Event

2 Answers2