时间戳

首页 > 解决方案 > 使用打字稿Angular 6从表单上的选择输入中获取值

angular - 使用打字稿Angular 6从表单上的选择输入中获取值

问题描述

我有一个用 angular 6 typescript 编写的表单 html 代码，但我不知道如何从组件中获取选定的值？

下面是我的html页面。

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select>
        <option value="1">Male</option>
        <option value="2">Female</option>
        <option value="3">Intersex</option>
        <option value="4">Trans</option>
        <option value="5">Others</option>
    </select>
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>

标签： angulartypescript

解决方案

您可以使用响应式表单并创建一个 formGroup，但为了简单起见，您可以使用formControl.

成分

  selectControl:FormControl = new FormControl()

模板 

<article>
    <h1>What is your gender?</h1>
    <h2><span>Select a gender:</span></h2>
    <select [formControl]="selectControl">
        <option value="1">Male</option>
        <option value="2">Female</option>
        <option value="3">Intersex</option>
        <option value="4">Trans</option>
        <option value="5">Others</option>
    </select>
    <p><span>You selected: </span><b>{{selectControl.value}}</b></p>
    <button (click)="selectControl.setValue('4')">Set Value</button>
</article>

这可能看起来可以替代，ngModel但我只是推广反应形式

演示

推荐阅读