Question

在component.html文件中我有一个select元素，带有选项：

<select name="balanceRounding" id="generalBalanceRounding" class="form-control" formControlName="balanceRounding">
    <option *ngFor="let balRounding of balRoundings 
        [value]="balanceRounding.value">{{balRounding.text}}
    </option>
</select>

在component.ts文件中，我有：

balRoundings = [
        { text: 'No Rounding', value: null },
        { text: '0.01', value: 0.01 },
        { text: '0.02', value: 0.02 },
        { text: '0.05', value: 0.05 },
        { text: '0.10', value: 0.10 },
        { text: '0.20', value: 0.20 },
        { text: '0.50', value: 0.50 },
        { text: '1.00', value: 1.00 }
];

现在，当我从下拉列表中选择任何值时，都会在balanceRounding（formControlName）中将所选值作为字符串获取。

即如果我选择0.05，那么我的balanceRounding为'0.05'

如果我选择“不取整”，那么我的balanceRounding为“空”

我只是不明白为什么我的值会被转换成字符串。

有人可以建议我如何拥有具有类型的值吗？

谢谢。

Answer 1

就我的经验而言，我建议您使用[ngValue]指令而不是[value]，它会保留数字等数据类型，甚至您也可以传入对象。

Answer 2

正确的方法是使用function isValidForm() { var inputStandard = document.getElementById("inputField"); if (inputStandard.value.length == 0) { inputStandard.value = "this field wasn't filled"; return false; } return true; }。

可以使用<form id="form" onsubmit="return isValidForm()"> <input type="text" id="inputField" /> <input type="submit" /> </form>或ngValue。两者之间的唯一区别是，值始终是一个字符串，在ngValue中可以传递对象。

value

这是解决您问题的快速解决方案，

https://stackblitz.com/edit/angular-reactive-forms-bpx2ts?file=app/app.component.html

在控制台中，您应该能够看到相应表单的输出

希望有帮助！

下拉选项值属性绑定到formControlName导致修改后的类型

2 个答案: