Angular 如何在没有输入元素或隐藏UI元素的情况下以角度形式分配值？

我正在处理这个模板驱动的表单，在这里我有一个下拉列表

下拉列表的值为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>

提交表单时，我还希望表单输出中包含StateName

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

我可以想出一种方法，我们可以使用元素并隐藏元素，还有其他方法吗

---

提交后在Typescript文件中执行此操作的唯一方法是什么

是的，根据给定的限制条件，您必须在

.ts

文件中处理表单提交。

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>

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

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

---

这很有道理，谢谢！如果你有更好的方法，请补充你的答案。

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