如何使用表单组将离子选择值设置为具有反应形式的数字? [英] 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.

选项一是只使用 select 而不是 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/dwbttQZTh9JGwKcvFtTX?p=preview

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

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

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