mat-option (onSelectionChange) -- the value does not appear correctly

Question

When I choose city for the first time in its dropdown, the value does not appear. When I then select country in the second dropdown, the first value in the first dropdown appears, and the second value in the second dropdown does not appear. Any suggestions as to what the problem is in my code?

Code.ts

  updateForm(event: MatOptionSelectionChange , city: City, country_id: Country, region_id: Region) {
        if (event.source.selected) {
        this.Myform['controls']['country_id'].patchValue(this.country_id.value);
          this.Myform['controls']['city'].patchValue(this.city.value);
        }
    }

code.html

    <input formControlName="country_id" id="country_id" matInput placeholder="Select Region*" aria-label="State" [matAutocomplete]="auto"
      autoActiveFirstOption [formControl]="country_id">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (onSelectionChange)="updateForm($event,country.id,'country_id')" id="country_id" *ngFor="let country of filteredOptionsCountry | async" [value]="country.name">
        {{ country.name }}
      </mat-option>
    </mat-autocomplete> 

   <input formControlName="city" id="city" matInput placeholder="Select City*" aria-label="State" [matAutocomplete]="auto1"
      autoActiveFirstOption [formControl]="city">
    <mat-autocomplete #auto1="matAutocomplete">
      <mat-option (onSelectionChange)="updateForm($event,city.id,'city')" *ngFor="let city of filteredOptionsCity | async" [value]="city.name">
        {{ city.name }}
      </mat-option>
    </mat-autocomplete> 

Thank you!

Solution

Ok what happens is you patch your value with the first call. But in your first call you call this this.country_id.value which is not set so undefined. In your second call this.country_id.value is set and will be added.

This might help you understand:

updateForm(event: MatOptionSelectionChange , city: any, country_id: any, region_id: any) {
   if (country_id !== ''){
      this.Myform['controls'['country_id'].patchValue(country_id);
   }
   if (city !== '') {
      this.Myform['controls']['city'].patchValue(city);
   }
}

And in the HTML:

(onSelectionChange)="updateForm($event, city.id, '', '')"

(onSelectionChange)="updateForm($event, '', country.id, '')"

Comments

[A. B]

I change like this: updateForm(event: any, city: any, country_id: any, region_id: any) { if (event.isUserInput) { this.Myform['controls']['country_id'].patchValue(country_id)‌​; this.Myform['controls']['city'].patchValue(city); this.Myform['controls']['region_id'].patchValue(region_id); } }

[A. B]

and html: <input formControlName="country_id" id="country_id" matInput placeholder="Select Region*" aria-label="State" [matAutocomplete]="auto" autoActiveFirstOption [formControl]="country_id"> <mat-autocomplete #auto="matAutocomplete"> <mat-option (onSelectionChange)="updateForm($event,country.country_id,'c‌​ountry_id')" *ngFor="let country of filteredOptionsCountry | async" [value]="country.name"> {{ country.name }} </mat-option> </mat-autocomplete>