Binding two dropdown menu

Question

I am using reactive driven form approach. I have two drop down which has list of countries in two different languages say in English and Hindi. My use case is if I am selecting any item from the English drop down, from Hindi dropdown it should get bind. (Assuming the country code is taken as same for both the drop down)

I tried binding using [value], but it is selecting only once, if I am selecting different value the same is not reflecting. On binding using ngModel, below error is coming ngModel cannot be used to register form controls with a parent formGroup directive.

        <form [formGroup]="userForm" class="user__form">
        <div class="user__dropdown">
          <mat-form-field>
            <mat-select
              placeholder="REGION"
              formControlName="region"
              #region
            >
              <mat-option *ngFor="let region of regions" [value]="region.locationCode">{{
                region.locationName
              }}</mat-option>
            </mat-select>      
          </mat-form-field>
        </div>
      </form>

    <form [formGroup]="secUserForm" class="user__form">
      <div class="user__dropdown">
        <mat-form-field>
          <mat-select
            name="t_region"
            [value]="userForm.get('region').value"
            [disabled]="true"
            [placeholder]="REGION"
          >
            <mat-option *ngFor="let region of transRegions" [value]="region.locationCode">{{
              region.locationName
            }}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </form>

insted of firing an event can't it be directly bind using ngModel?? — Shashank Agrawal

Eliseo Eliseo · Accepted Answer · 2019-01-22T08:15:51

If you has only two languages, in this case is easy if your countries are like

{locationCode:...,locationName1:...,locationName2:...}

You can change the last options by

<mat-option *ngFor="let region of transRegions" 
      [value]="region.locationCode">
      {{userForm.get('region').value=='en'? region.locationName1
                                          : region.locationName2
      }}
</mat-option>

And you can forget about changes

Another aproach is that you has the data like

transRegion={idiom:'en',regions:[{locationCode:...,locationName:...},...]

Remember that your transRegion can be an object and when change a select you can add the properties

transRegion:any={}
service.getRegions(county).subscribe)res=>{
     trasnRegion[country]=res
}

Then you can transform and make the *ngFor over

<mat-option 
     *ngFor="let region of transRegions[userForm.get('region').value]"
      [value]="region.locationCode">
      {{region.locationName}}
</mat-option>

Binding two dropdown menu

1 Answers