时间戳

首页 > 解决方案 > 如何将相同的表单控件名称用于角度的多个下拉列表

angular - 如何将相同的表单控件名称用于角度的多个下拉列表

问题描述

我使用下拉菜单，如果我选择冷冻机，则会出现另一个下拉菜单，对于两个下拉菜单，我使用相同的表单控件名称，以便将值传递给具有相同标题的后端，但由于使用相同的表单控件名称在选择第二个下拉列表的值后，它正在消失。我们如何解决这个问题，我们如何从两个不同的下拉列表中传递具有相同标题的值。

html

   <mat-form-field  fxFlex="28%" class="searchForm" >
        <mat-label>Entity Name</mat-label>
         <mat-select class="form-control" formControlName="entityName" id="entityName">
            <mat-option *ngFor="let entityName of entityNames" [value]="entityName.value">
               {{entityName.viewValue}}
            </mat-option>
         </mat-select>
       </mat-form-field>
          <mat-form-field  fxFlex="28%" class="searchForm"*ngIf="auditForm.get('entityName').value=='freezer'" >
            <mat-label>Storage</mat-label>
             <mat-select class="form-control" formControlName="entityName" id="entityName">
                <mat-option *ngFor="let freezer of freezers" [value]="freezer.value">
                   {{freezer.viewValue}}
                </mat-option>
             </mat-select>
           </mat-form-field>

ts

 public entityNames:any=[
    {viewValue: 'User', value: 'User'},
    {viewValue: 'Receivable',value: 'Receivable'},
    {viewValue: 'Location',value: 'Location'},
    {viewValue: 'Item', value: 'Item'},
    {viewValue: 'Freezer', value:'freezer'},
    {viewValue: 'Refrigerator', value:'refrigerator'},
    {viewValue: 'Incubator', value:'incubator'},
    {viewValue: 'Open Storage', value:'open_storage'},
   ];
 public freezers:any=[
     {viewValue: ' Rack', value:'freezer_rack'},
     {viewValue: ' Row', value:'freezer_row'},
     {viewValue: ' Section', value:'freezer_section'},
     {viewValue: ' Shelf', value:'freezer_shelf'},
     {viewValue: ' Slot', value:'freezer_slot'},
   ]; 
 this.auditForm = this.fb.group({

      entityName:[''],

    })

我需要通过两个下拉列表将值传递给 entityName，我们如何传递值？

标签： angular

解决方案

您不能在两个输入中使用相同的 formControlName。

重新考虑你的代码。您可以使用辅助 formControl - 并使用 [formControl]="mynewControl"-，或使用 [ngModel]

<input [ngModel]="form.get('entityName').value" 
       (ngModelChange)="form.get('entityName').setValue($event)
       [ngModelOptions]="{standalone:true}">

推荐阅读