如何在不使用输入元素或不隐藏UI元素的情况下以Angular形式分配值？

Question

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

该下拉菜单的值为ID，而显示值为Name。

提交表单时，我需要同时将值[[ID和名称都输入到表单输出中

   <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文件中执行此操作的唯一方法吗？ 

Answer 1

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

Answer 2

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