如何在没有输入元素或隐藏 UI 元素的情况下在 Angular 表单中分配值？答案

【问题标题】：How to assign values in an Angular form without an input element or hiding the UI element?如何在没有输入元素或隐藏 UI 元素的情况下在 Angular 表单中分配值？
【发布时间】：2020-02-17 07:23:00
【问题描述】：

我正在处理这个模板驱动的表单，其中有一个下拉菜单。

下拉列表有一个 ID 作为值，Name 作为显示值。

当我提交表单时，我需要在表单输出中同时包含 ID 和 Name 值

   <mat-form-field>
            <mat-label>State</mat-label>
            <mat-select [(ngModel)]="data.stateCode" name="StateCode" #yddfyty>
              <mat-option *ngFor="let state of stateOptions" [value]="state.ID">
                {{state.name}}
              </mat-option>
            </mat-select>
   </mat-form-field>

提交表单后，我得到一个 JSON

{
  StateCode: "Option I select in the Dropdown"
}

当我提交表单时，我还希望 StateName 出现在表单输出中。

如何将下拉列表中选择的 StateName 分配给模板驱动表单中的模型属性？

我能想到一种方法，我们可以使用一个元素并隐藏该元素，还有其他方法吗？

提交后只能在Typescript文件中执行吗？

【问题讨论】：

标签： angular angular-ui angular-ui-select

【解决方案1】：

ViewChild 在这些情况下会派上用场：

HTML 文件：

<mat-form-field>
            <mat-label>State</mat-label>
            <mat-select  name="StateCode" #ElementRef>
              <mat-option *ngFor="let state of stateOptions" [value]="state.ID">
                {{state.name}}
              </mat-option>
            </mat-select>
   </mat-form-field>

组件 TS 文件：

首先声明一个viewchild变量：

@ViewChild('ElementRef') stateElement: any;

以后您可以在提交表单时使用此变量：

    OnSubmit(){
     let selectedStateCode = this.stateElement.nativeElement.value//selected dropdown value
     let selectedStateText = this.stateElement.nativeElement.textContent //selected dropdown text
     //rest of your submit code;
    }

【讨论】：

这很有道理，谢谢！如果您有更好的方法，请添加到您的答案中。

【解决方案2】：

是的，在给定的限制下，您必须处理.ts 文件中的表单提交。

【讨论】：