如何使用表格组将离子选择值设置为具有反应形式的数字？ [英] how can i set ion-select value a number with reactive form using form group?

问题描述

<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。
我正在使用被动形式：

I need this select when I take it's value to be number not string (0 number , or 1 number ) not "0" and not "1". I'm using reactive form :

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

推荐答案

我在这里看到的是几个选项，这两个都需要工作，其他需要造型，其他需要额外的变量。因此，在将数据传递到后端之前，最好使用 parseInt（）。

What I see here are a couple of options, which both tho requires work, other for styling, other for extra variables. So going for parseInt() before passing the data to the backend would be preferable.

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

Option one is to just use select instead of ion-select, with that, ngValue works, which can capture the number. But that requires styling for the select to look like an ionic select.

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

Option two would be to have two variables and use [value] in the select instead of 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/dwbttQZTh9JGwccvFtTX?p=preview

也许最简单的是只需使用 parseInt（）获取该值，然后再将其发送到后端。

Maybe easiest is to just go with parseInt() for the value before sending it to the backend.

这篇关于如何使用表格组将离子选择值设置为具有反应形式的数字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！