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

Question

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

下拉菜单的值是 ID，显示值是 Name。

当我提交表单时，我需要值 ID 和 Name 都在表单 output

中

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

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

How to assign values in an Angular form without an input element or hiding the UI element?

angular-ui

angular-ui-select

angular