Question

我正在使用反应驱动形式方法。我有两个下拉菜单，其中以英语和北印度语两种语言列出了国家列表。我的用例是，如果我要从English下拉列表中选择任何项目，则从Hindi下拉列表中应该将其绑定。（假设下拉菜单中的国家/地区代码相同）

我尝试使用[value]进行绑定，但是它仅选择一次，如果我选择不同的值，则不会反映出来。使用ngModel进行绑定时，出现以下错误 ngModel不能用于通过父formGroup指令注册表单控件。

        <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>

Answer 1

如果您只有两种语言，在这种情况下，如果您所在的国家/地区像

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

您可以通过以下方式更改最后一个选项

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

您可以忘记更改

另一个方法是您拥有类似的数据

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

请记住，您的transRegion可以是一个对象，并且在更改选择时可以添加属性

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

然后，您可以变换并制作* ngFor结束

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

绑定两个下拉菜单

1 个答案: