如何使用表单组设置具有反应形式的数字的离子选择值?

Question

<ion-select formControlName="FollowUpType"
(ngModelChange)="reset()">
<ion-option value="0">
A
</ion-option>
<ion-option value="1">
B
</ion-option>
</ion-select>

当我取它的值是数字而不是字符串(0 数字或 1 个数字(而不是"0"而不是"1"时，我需要这个选择。 我正在使用反应形式：

this.Form = this.formBuilder.group({
FollowUpType: [''],
});

Answer 1

您应该绑定为[value]而不是value

<ion-select formControlName="FollowUpType" (ngModelChange)="reset()">
<ion-option [value]="0">A</ion-option>
<ion-option [value]="1">B</ion-option>
</ion-select>

Answer 2

我在这里看到的是几个选项，它们都需要工作，其他用于样式，其他用于额外变量。因此，最好在将数据传递到后端之前进行parseInt()。

选项一是只使用select而不是ion-select，这样，ngValue工作，可以捕获数字。但这需要选择的样式看起来像离子选择。

选项二是有两个变量并在选择中使用[value]而不是select。

最后一个选项是使用数组

values = [{value:0, label:'A'},{value:1, label: 'B'}]

迭代它并将其与[value]一起使用：

<ion-select formControlName="FollowUpType" (ionChange)="reset()">
<ion-option *ngFor="let val of values" [value]="val.value">
{{val.label}}
</ion-option>
</ion-select>

演示所有三个：http://plnkr.co/edit/dwbttQZTh9JGwKcvFtTX?p=preview

也许最简单的方法是在将值发送到后端之前使用parseInt()获取值。

Answer 3

此信息可能会帮助某人：

您需要在离子选择中设置 formControlName，而不是在离子项中设置，如果您在项中使用选择。

如果在离子项中设置了 formControlName，离子选择似乎不会刷新值。离子日期时间也是如此。